Image 如何在引导缩略图中匹配宽图像？

我有一个四列行（col-md-3）行。每列都有一个宽度为220px、高度为360px的缩略图。如何用不同分辨率的图像（例如：1920X1080px或2480x3508px）填充/覆盖缩略图div

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

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

    </div>

</div>

我试过这个：

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

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

    </div>

</div>

---

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

如果我理解正确，有一些解决方案，您可以使用CSS为每个

.thumbnail

添加不同的类，并为每个

.thumbnail

添加背景图像，但就目前和您当前的代码而言，您可以添加此CSS并解决您的问题：

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

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

    </div>

</div>

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

编辑：

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

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

    </div>

</div>

如果希望保持纵横比，我建议在

.thumboil

HTML元素中添加合适的类，然后使用CSS背景添加图像

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

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

    </div>

</div>

想象一下：

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

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

    </div>

</div>

HTML:

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

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

    </div>

</div>

---

如果我给高度：100%，那么图像会被拉伸。但它应该保持纵横比，同时覆盖整个缩略图。@Sharecorn没问题，很高兴这有效，如果有效，也许你应该接受这个问题作为正确答案。谢谢