如何适应bootstrap div中的图像？(How to fit the image inside the bootstrap div?)

如何适应bootstrap div中的图像？(How to fit the image inside the bootstrap div?)

我使用下面的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请指教。

I am using the div like below

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

User will upload any kind of image. So i need to fit the image inside the div it means i need to cover the full div using image..I am using bootstrap please advise.

最满意答案

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

Just add you images width to 100%.

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

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>

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