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请指教。

Answer 1

只需将图片宽度添加到100％即可。

但正如您所说，用户会上传各种类型的图片，因此可以使用.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>属性。

像这样添加CSS：

object-fit

您可以在此处找到有关object-position和// currently does <SomeComponent name={} id={} blah1={} blah2={} />的详细信息：https://css-tricks.com/on-object-fit-and-object-position/

Answer 2

可以安全地假设通过拟合表示覆盖所有宽度。这是因为

您通常只使用col-sm-6或col-md-6或col-lg-4来了解身高。
如果您尝试根据自己的意愿调整图像的宽高比，则图像的宽高比很可能会丢失。

使用<img src = "images/dummy_image.png" class = "img-responsive" width = "100%" />来拟合列。这将使您的图像在宽度方向上适合列，并将自动修改高度（保持纵横比），因此您不必担心图像不合理地调整大小。

Answer 3

对于Bootstrap 4用户，这有效

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

如何在bootstrap div中安装图像？

3 个答案: