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

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>的高度高于其他高度，那么网格就不会出现问题。＃39; t正确显示。我想出了如何修复缩略图对齐问题，我想很多人都可以使用CSS Flex属性。

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

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

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

3 个答案: