我的图像从我的 div 列中流出。我如何修复它并使图像全尺寸变成 div

Posted 2023-03-05

【中文标题】我的图像从我的 div 列中流出。我如何修复它并使图像全尺寸变成 div

【英文标题】：My image is flowing out from my div column. How I can fix it and made the image full-size into div

【发布时间】：2019-11-09 19:08:12

【问题描述】：

我有一个全宽容器（容器流体）和卡片桌，里面有一个垂直列和 2 行，一个有 3 列，另一个有 2 列。问题是我的图像从我的 div col 中移出（流出），我使用了溢出隐藏，但它没有帮助。我用过卡片，但也什么都没有。在 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>

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

【参考方案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>