如何在引导缩略图中放入宽图像？

Question

我有一个四列行（col-md-3）行。每列都有一个宽度为220像素和高度为-360像素的缩略图。如何使用不同分辨率的图像填充/覆盖缩略图div（例如：1920X1080px或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

如果我理解正确，有一些解决方案，您可以为每个.thumbnail添加不同的类，并使用CSS为每个.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")
}