如何将图像放入 Bootstrap 3 div？

Question

我在代码中使用 div 标签，如下所示：

 <div class="col-sm-6 col-md-6 col-lg-4">
  <img src="images/dummy_image.png" class="img-responsive">
</div>

用户可以上传任何类型的图像并在此处显示。我想将图像放入 div ，这意味着我需要在调整大小时使用该图像来覆盖整个 div 。

我正在使用 Bootstrap 3.3.7。请指教。

原文由 user1770268 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需将图像宽度添加到 100%。

但是正如您所说，用户将上传各种图像，因此可以使用 object-fit 属性。

像这样添加 CSS：

 .fit-image{
width: 100%;
object-fit: cover;
height: 300px; /* only if you want fixed height */
}

<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-responsive fit-image">
</div>

您将在此处找到有关 object-fit 和 object-position 的详细信息： https ://css-tricks.com/on-object-fit-and-object-position/

原文由 Zahidul Islam Ruhel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于引导程序 4

 <div class="col-sm-6 col-md-6 col-lg-4">
    <img src="images/dummy_image.png" class="img-fluid">
</div>

引导程序.css

 .img-fluid {
  max-width: 100%;
  height: auto
}

原文由 Dawit Abraham 发布，翻译遵循 CC BY-SA 4.0 许可协议