css - Bootstrap 中的缩略图类

Question

问题

因此，我尝试将 3 张图片排成一行。每个图像都有不同的维度。 所以，我尝试添加缩略图类，希望它能使所有图像大小相同，但它只添加了边框，而没有改变图像大小。

我想要什么

我希望所有图片大小相同。

代码

(代码是针对一张图片的，因为所有图片都有相同的代码)

<div class="col-lg-4">
     <div class="thumbnail">
      <img src="https://images.unsplash.com/photo1423034816855245e5820ff8cdpr=1&auto=format&fit=crop&w=1500&h=2000&q=80&cs=tinysrgb&crop="alt="Something in france!">
     </div>
</div>

Answer 1

你可以这样做，将 width: 100%; 和 height: auto; 应用于 img

参见 fiddle用于工作演示

img{
  max-width: 100%;
  border: 1px solid red;
  width: 100%;
  height: 200px;  // adjust it based on your need
}

<div class="row">

  <div class="col-md-4 col-sm-4">
    <img src="http://placehold.it/500x150" />
  </div>
  <div class="col-md-4 col-sm-4">
    <img src="http://placehold.it/100x50" />
  </div>
  <div class="col-md-4 col-sm-4">
    <img src="http://placehold.it/200x150" />
  </div>

</div>