Question

大多数情况下，当我使用缩略图时，图像的高度并不均匀，如下所示：

<ul class="thumbnails">
  ...
  <li class="span4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/360x270" alt="">
    </a>
  </li>
  <li class="span4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/360x240" alt="">
    </a>
  </li>
  ...
</ul>

我还创建了一个简单的jsFiddle来展示这里的问题：http://jsfiddle.net/c49Tk/

那么，我怎样才能强制所有缩略图共享完全相同的高度并改变宽度，忽略并保持宽高比？

Answer 1

你可以使用CSS类强制它像

img { width: 200px; height: 200px; }

Answer 2

恐怕没有一个简单的答案。

Bootstrap的工作方式，它将max-width: 100%分配给img。在您共享的示例中，它们都被父级的宽度（span4）保留。同样，父母从图像中获得高度，因此您甚至无法将图像设置为min-height: 100%。

如果可能，您可以在服务器端调整这些图像的大小，尽管这不是您正在寻找的答案！

您可以使用JavaScript来强制图像的高度（尽管您还需要强制删除max-width属性），但这意味着您不再需要从Bootstrap获取网格。重新使用。

我希望用更多的JavaScript，你可以：

将父级（锚点或lis）设置为overflox-x: hidden;
强制图像全部都是相同的高度。

这意味着你的所有图像都是相同高度的，但你会松开任何更宽的图像的右边缘。

最后一个选择是简单地通过CSS强制图像高度和宽度，尽管这也意味着你会失去图像宽高比。

虽然有一条好消息：只要你使用class="row"或class="row-fluid"，它们至少会被清除属性，所以如果你有几行它们你就不会得到令人讨厌的浮动即使图像不是等高，也会出现问题。

Bootstrap - 在一行中计算不同大小的缩略图

2 个答案: