如何在 Bootstrap 3 div 中放置图像？

Posted 2023-03-05

【中文标题】如何在 Bootstrap 3 div 中放置图像？

【英文标题】：How to fit an image inside a Bootstrap 3 div?

【发布时间】：2018-07-07 01:37:02

【问题描述】：

我在代码中使用了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。请指教。

【问题讨论】：

您使用的是 Bootstrap 3 还是 Bootstrap 4？

引导 v3.3.7

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

【参考方案2】：

对于 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

【参考方案3】：

可以安全地假设，拟合是指覆盖所有宽度。这是因为

您通常仅使用col-sm-6 或col-md-6 或col-lg-4 不知道高度。 如果您尝试根据自己的意愿调整图像的大小，则图像的纵横比很可能会丢失。

使用<img src = "images/dummy_image.png" class = "img-responsive" width = "100%" /> 安装色谱柱。这将使您的图像在宽度方向上适合列，并会自动修改高度（记住纵横比），因此您不必担心图像大小不合逻辑。

【讨论】：

没错。但是，如果您使用引导程序，则可以避免在引导程序类“w-100”中使用 。干净了一点。