引导程序中具有不同图像大小的图像库

Question

I have two images with two different size. I am using bootstrap in my project. But I cant place the images together which looks like both have same dimension. I have gone through similar questions and tried a lot. Please help me to sort this out.

   <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>

my css is

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

Answer 1

You can do it by putting the picture as background-image for the 'div' tag and setting value of 'background-position' as 'stretch'.

Said that, if the images are of different resolution and you fit them into the same-size container it might look pixelated at times.