如何在Bootstrap 3 div中放入图像? [英] How to fit an image inside a Bootstrap 3 div?

问题描述

我在代码中使用 div 标记，如下所示:

I am using a div tag in code as shown below:

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

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

The user can upload any kind of image and have it displayed here. I want to fit the image inside of the div, meaning specifically that I need to cover the full div using that image as it's resized.

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

I am using Bootstrap 3.3.7. Please advise.

推荐答案

只需将图像宽度添加到100％.

Just add you images width to 100%.

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

But as you are saying user will upload various kind of images, so can use object-fit property.

添加CSS，如下所示:

Add the CSS like this:

.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 的详细信息:

You will find the details about object-fit and object-position here : https://css-tricks.com/on-object-fit-and-object-position/

这篇关于如何在Bootstrap 3 div中放入图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！