多数情况下,当我使用缩略图时,图像的高度不一致,如下所示:

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

因此,如何强制所有缩略图共享完全相同的高度并更改其宽度,而忽略并保持宽高比呢?

最佳答案

恐怕对此没有简单的答案。

Bootstrap的工作方式是将max-width: 100%分配给img。在您共享的示例中,它们全部保留为其父对象的宽度(span4)。同样,父母正在从图像中获取身高,因此您甚至无法将图像设置为min-height: 100%

如果可能,您可以在服务器端调整这些图像的大小,尽管这并不是您要找的答案!

您可以使用JavaScript强制设置图像的高度(尽管您还需要强制删除max-width属性),但这意味着您不再需要从正在使用的Bootstrap中获取网格。

我希望有了更多的JavaScript,您可以:


将父级(锚或lis)设置为overflox-x:hidden
强制图像都具有相同的高度。


这将意味着所有图像的高度均等,但是您将失去任何较宽图像的右边缘。

最后一种选择是仅通过CSS强制图像的高度和宽度,尽管这也意味着您将失去图像的宽高比。

好消息是:只要您使用class="row"class="row-fluid",它们至少会被清除,因此,如果有几行,即使图像也不会出现令人讨厌的浮边问题高度不相等。

关于css - Bootstrap-在一行中考虑不同大小的缩略图,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16735117/

10-12 13:11
查看更多