如何在引导缩略图中适合宽图像？

Posted 2023-03-29

【中文标题】如何在引导缩略图中适合宽图像？

【英文标题】：how to fit a wide image in bootstrap thumbnail?

【发布时间】：2017-04-03 02:28:18

【问题描述】：

我有一个四列行 (col-md-3) 行。每列都有一个宽度为 220 像素和高度为 360 像素的缩略图。如何使用不同分辨率的图像填充/覆盖缩略图 div（例如：1920X1080 像素或 2480 X 3508 像素）？

我试过这个：

        <div class="thumbnail">
            <img  src="images/highres.jpg" >

        </div><!----End of thumbnail-->

    </div>

</div>

CSS：

           img
        object-fit: cover;
    

    .thumbnail
        height: 360px;
        width: 220px;
        overflow:hidden;
    

我使用了 1920X1080px（宽）的图像，它只是填充了缩略图的一半。我想要的是保持纵横比并覆盖缩略图。什么是最简单的解决方案？

【参考方案1】：

如果我理解正确，有一些解决方案，您可以使用 CSS 为每个 .thumbnail 添加不同的类并为每个 .thumbnail 添加背景图片，但现在和您当前的代码，您可以添加这个 CSS并且可以解决您的问题：

.thumbnail > img
   width:100%;
   height:100%;

编辑：

如果你想保持纵横比，我建议在你的.thumbnail html 元素中添加合适的类，然后使用 CSS 背景添加图像。

想象一下：

HTML：

<div class="thumbnail thumbnail-1"></div>
<div class="thumbnail thumbnail-3"></div>
<div class="thumbnail thumbnail-4"></div>

CSS：

.thumbnail 
  background-size:cover;
  backgrond-repeat:no-repeat;


.thumbnail-1
  background-image:url("image1.jpg")


.thumbnail-2
  background-image:url("image2.jpg")


.thumbnail-3
  background-image:url("image3.jpg")

【讨论】：

如果我给出高度：100%，那么图像会被拉伸。但它应该保持纵横比并覆盖整个缩略图。

@Sharecorn 没问题，很高兴这有效，如果有效，也许您应该接受这个问题作为正确答案。谢谢