如何在Bootstrap 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内放入图像，这意味着我需要使用image覆盖整个div。

Answer 1

对于 Bootstrap 4

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

bootstrap.css

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

Answer 2

只需将图像宽度添加到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/