html - Bootstrap 中具有不同图像大小的图像库

Question

我有两个不同大小的图像。我在我的元素中使用 Bootstrap 。但是我无法将看起来具有相同尺寸的图像放在一起。我经历过类似的问题并尝试了很多。请帮我解决这个问题。

   <div class="row">
  <div class="col-md-4">
  <div class="thumbnail">
    <a href="http://placehold.it/2048x1536" target="_blank">
      <img src="http://placehold.it/2048x1536" alt="Nature">
    </a>
  </div>
</div>

<div class="col-md-4">
  <div class="thumbnail">
    <a href="http://placehold.it/1280x720" target="_blank">
      <img src="http://placehold.it/1280x720" alt="Nature">
    </a>
  </div>
</div>

我的CSS是

.thumbnail img {
height:250px;
width:100%;
}

Answer 1

您可以通过将图片作为 'div' 标签的背景图像并将 'background-position' 的值设置为 'stretch' 来实现。

也就是说，如果图像具有不同的分辨率，并且您将它们放入相同大小的容器中，它有时看起来可能会像素化。