如何设置Twitter引导缩略图的高度？

Question

我在设置个人网站的缩略图模块时遇到问题.我为我的项目使用twitter bootstrap(3.0),我无法完成Thumbnail模块的设置.

宽度没问题,但我无法设置缩略图的高度(我无法将所有缩略图对齐为相同的高度).

如何为所有缩略图设置一个(标准)高度,并将图像缩放/缩放到中心,这样它们可以在不拉伸图像的情况下填充所有空间？

<div class="row">
<!-- Thumbnail 0 -->
<div class="col-sm-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="img.png" alt="...">
    </a>
    <div class="caption">
        <h4>Arctic MX-2, 8g</h4>
    </div>
</div><!-- /thumbnail 0 -->
<!-- Thumbnail 1 -->
<div class="col-sm-6 col-md-3">
    <a href="#" class="thumbnail">
        <img src="blue.png" alt="...">
    </a>
    <div class="caption">
        <h4>Arctic MX-2, 8g</h4>
    </div>
</div><!-- /thumbnail 1 -->
</div><!-- /thumbnail -->

Answer 1

在css中:

.thumbnail img { min-height:50px; height:50px; } // or whatever height you desire

或内联:

<img src="img.png" alt="..." style="min-height:50px;height:50px;" />

Answer 2

嘿我正在查看你的问题,因为我在Bootstrap中遇到了同样的问题,如果其中一个<div>高度高于另一个,则网格无法正常显示.我想出了如何修复缩略图对齐问题,我想很多人都可以使用CSS Flex属性.

class="row"我在div中添加了style="display:flex; flex-wrap: wrap;".基本上,我的代码看起来像这样:

<div class="row" style="display:flex; flex-wrap: wrap;">
  <div class="col-sm-3">
    <div class="thumbnail">
      <img src="http://lorempixel.com/500/300" style="width:200px">
      <div class="caption">
        <h4>Some thumbnail heading</h4>
      </div>
    </div>
  </div>  
  <div class="col-sm-3">
    <div class="thumbnail">
      <img src="http://lorempixel.com/500/300" style="width:200px">
      <div class="caption">
        <h4>Some thumbnail heading</h4>
      </div>
    </div>
  </div>
  .. any number of thumbnails you want
</div>

所以你可以有不同的缩略图高度,它会正确显示,也许不是jQuery Masonry,但至少更好.