28

我在为我的个人网站设置缩略图模块时遇到问题。我在我的项目中使用 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 -->
4

3 回答 3

29

在 CSS 中：

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

或内联：

<img src="img.png" alt="..." style="min-height:50px;height:50px;" />
于 2013-08-27T21:41:13.297 回答
8

嘿，我在看你的问题，因为我在 Bootstrap 中遇到了同样的问题，如果其中一个<div>的高度高于另一个，则网格无法正确显示。我想出了如何解决缩略图对齐问题，我想很多人可能会使用 CSS Flex 属性。

在class="row"我添加的 divstyle="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，但至少更好。

于 2014-11-21T22:13:59.790 回答
2

使用 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; }}
于 2014-07-30T01:14:06.580 回答