小高度 div 中的大高度图像 div 引导 4.

Question

我有一张尺寸为高度：751，宽度为244像素的图像，我需要将此图像放入尺寸为132x132的div，我希望这张图片具有背景尺寸：包含并且不被拉伸。我尝试过使用img-fluid，但没有任何反应。我做错了什么？

.thumbs-container {
width: 132px;
height: 132px;
}
.item1 {
background-size:contain;
}

<div class="thumbs-container col-2">
<img
class="item1 img-thumbnail"
src="http://via.placeholder.com/244x751"
/>
</div>

Answer 1

.thumbs-container {
width: 132px;
height: 132px;
}
.item1 {
background: url('http://via.placeholder.com/244x751')no-repeat center center;
width: 132px;
height: 132px;
background-size:cover;
}

<div class="thumbs-container col-2">

<div class="item1"></div>
</div>

Answer 2

将.item1的高度设置为 100%

.item1 {
height: 100%;
}

Answer 3

background-size:contain仅适用于在CSS中设置为背景的图像。 只需删除img标签并在 css 中设置您的背景，就像这样：

HTML

<div class="thumbs-container col-2"></div>

CSS

.thumbs-container {
width: 132px;
height: 132px;
background: url('http://via.placeholder.com/244x751') no-repeat center/contain;
}