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

Posted 2023-03-29

【中文标题】如何设置 Twitter 引导缩略图的高度？

【英文标题】：How can I set height for Twitter bootstrap thumbnails?

【发布时间】：2013-08-30 19:41:27

【问题描述】：

我在为我的个人网站设置缩略图模块时遇到问题。我的项目使用 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" >
    </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" >
    </a>
    <div class="caption">
        <h4>Arctic MX-2, 8g</h4>
    </div>
</div><!-- /thumbnail 1 -->
</div><!-- /thumbnail -->

【参考方案1】：

在 css 中：

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

或内联：

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

【讨论】：

.thumbnail img min-height: 200px; 好的，现在部分工作...我需要将图片裁剪到 200 像素才能完成。最后一张图片也被拉伸了。 Result

如果您的缩略图不是全部相同的纵横比，那么您有两个选择 - 您可以使用 css 使图像适合预先确定的高度和宽度 - 这将导致一些图像倾斜，或者你设置一个固定的高度或宽度，这将保留缩略图的原始纵横比，但可能会导致整体布局出现问题。

尝试this更改缩略图和图像大小，希望有所帮助

【参考方案2】：

嘿，我在看你的问题，因为我在 Bootstrap 中遇到了同样的问题，如果 <div> 的一个高度高于另一个，则网格无法正确显示。我想出了如何解决缩略图对齐问题，我想很多人可能会使用 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，但至少更好。

【参考方案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;