我的图像从div列流出。我如何解决它并使图像全尺寸成div

Question

我有一个全宽度的容器（容器流体），里面有一张卡片桌，我有一个垂直列和2行，一个有3列，另一个有2列。问题是我的图像从div列中移出（流出），我使用了溢出隐藏功能，但这无济于事。我用过Cards，但什么也没用。在CSS中，我没有再添加img{ width:100%; height:auto}。结果必须是自适应的，因此我不能使用自定义的高度和宽度。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid overflow-hidden">
 <div class="card-deck">
 <div class="row">
 <div class="col-xl-3 col-md-3 col-12">
 <img src="https://www.artgalleryofhamilton.com/wp- 
 content/uploads/2018/04/abstract-painting.jpg"class="card-img img- 
 fluid"/>
 </div>
 <div class="col-xl-9  col-md-9 col-12">
 <div class="row">
 <div class="col-xl-4 col-md-4 col-12">
 <img src="https://www.adorama.com/alc/wp- 
 content/uploads/2017/09/shutterstock_664474234-825x465.jpg"class="card- 
 img img-fluid"/>
 </div>
 <div class="col-xl-4 col-md-4 col-12">
 <img src="https://www.adorama.com/alc/wp- 
 content/uploads/2017/09/shutterstock_664474234-825x465.jpg"class="card- 
 img img-fluid"/>
 </div>
 <div class="col-xl-4 col-md-4 col-12">
 <img src="https://www.adorama.com/alc/wp- 
 content/uploads/2017/09/shutterstock_664474234-825x465.jpg"class="card- 
 img img-fluid"/>
 </div>
 </div>
 <div class="row">
 <div class="col-xl-4 col-md-4 col-12">
 <img src="https://www.adorama.com/alc/wp- 
 content/uploads/2017/09/shutterstock_664474234-825x465.jpg"class="card- 
 img img-fluid"/>
 </div>
 <div class="col-xl-8 col-md-8 col-12">
 <img src="https://images.unsplash.com/photo-1524721696987-b9527df9e512? 
 ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"class="card-img img- 
 fluid"/>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

我做了什么： 我想要的是：

Answer 1

您可以通过将图像设置为background-image

.img-6 {
  background: url(https://www.artgalleryofhamilton.com/wp-content/uploads/2018/04/abstract-painting.jpg) no-repeat;
  background-size: cover;
  height: 300px
}

.img-1 {
  background: url(https://www.adorama.com/alc/wp-content/uploads/2017/09/shutterstock_664474234-825x465.jpg) no-repeat;
  background-size: cover;
  height: 150px
}

.img-2 {
  background: url(https://images.unsplash.com/photo-1524721696987-b9527df9e512?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80) no-repeat;
  background-size: cover;
  height: 150px
}

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

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 img-6 ">

    </div>
    <div class="col-sm-8 ">
      <div class="row">
        <div class="col-sm-4 img-1">

        </div>
        <div class="col-sm-4 img-1">

        </div>
        <div class="col-sm-4 img-1">

        </div>
        <div class="col-sm-4 img-1">

        </div>
        <div class="col-sm-8 img-2">

        </div>
      </div>
    </div>
  </div>
</div>