html - 图片需要使用列设置，不使用高度和宽度

Question

我正在处理一项任务，我必须使用引导列并在不使用自定义高度和宽度的情况下设置图像。它应该只设置（高度：100%，宽度：100%），我不想使用 flex 它应该是基于列的。我被困在图像高度上。请有人能指出我正确的方向。提前致谢。

预期输出：实现代码：codepen link

.image-box-wrap { 
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto; 
  padding: 80px 0;
}
.image-box { position: relative; }
.empty-space { margin-top: 20px; }
.img-box {
  width: 100%;
  object-fit: cover;
  display: block;
}

.image-box { position: relative; }
.left-image {height: fit-content}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="image-box-wrap">
  <div class="image-box">
    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-4">
        <div class ="box-img">
            <img src="https://i.ibb.co/8MGNWpM/photo-1586500036065-bdaeac7a4feb.jpg" class="img-box left-image"/>
        </div>
      </div>
      <div class="col-lg-8 col-md-8 col-sm-8">
        <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-6">
                 <div class ="box-img">
                    <img src="https://i.ibb.co/dLv97wf/bangle-2156210-1920.jpg" class="img-box"/>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <div class ="box-img">
                    <img src="https://i.ibb.co/dLv97wf/bangle-2156210-1920.jpg" class="img-box"/>
                </div>
            </div>
        </div>      
          <div class="row empty-space">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class ="box-img">
                    <img src="https://i.ibb.co/Y0ZRx7B/photo-1498753427761-548428edfa67.jpg" class="img-box"/>
              </div>
            </div>
        </div>
    </div><!-- main row Ends Here-->
  </div><!-- image-box Ends Here-->
</div><!-- image-box-wrap Ends Here-->

标签： htmlcssbootstrap-4