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

【问题标题】：How to fit an image inside a Bootstrap 3 div?如何在 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

标签： html css twitter-bootstrap user-interface web

【解决方案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”中使用 width="100%"。干净了一点。