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

Question

我在为自己的个人网站设置缩略图模块时遇到了问题。我的项目中使用了Twitter Bootstrap（3.0），但我无法完成设置缩略图模块。

宽度方面没有问题，但我无法设置缩略图的高度（我无法使所有缩略图都对齐为相同的高度）。

我该如何设置所有缩略图的一个（标准）高度，并将图像缩放到中心以便它们可以填满所有空间而不拉伸图像？

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

- Ion Ungurean

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;" />

- Neil S

---

.thumbnail img { min-height: 200px; } 好的，现在部分工作已经完成了... 我需要将图片裁剪到200像素，以便完成它。同时最后一张图片被拉伸了。结果 - Ion Ungurean

如果您的缩略图不是相同的宽高比，那么您有两个选择 - 要么使用CSS使图像适应预定的高度和宽度 - 这将导致一些图像被扭曲，要么设置固定的高度或宽度，这将保留缩略图的原始宽高比，但可能会在整体布局中引起问题。 - Neil S

尝试使用 这个链接 来改变缩略图和图片大小，希望能有所帮助。 - Shaiju T

Answer 2

嘿，我看了你的问题，因为我在Bootstrap中遇到过同样的问题，如果其中一个

的高度高于另一个，则网格不会正确显示。我找到了解决缩略图对齐问题的方法，我认为许多人可能正在使用CSS Flex属性。

在

中，我添加了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那样完美，但至少更好。

- Juan Camilo Guarin P

Answer 3

使用 SCSS，您可以简单地进行以下操作：

@media (min-width: $screen-sm-min) {.thumbnail img { height:100px; }}
@media (min-width: $screen-md-min) {.thumbnail img { height:150px; }}
@media (min-width: $screen-lg-min) {.thumbnail img { height:200px; }}

- Rodolfo Jorge Nemer Nogueira