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

Question

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

我试过这个：

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

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

    </div>

</div>

CSS：

           img{
        object-fit: cover;
    }

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

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

Answer 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")
}