多数情况下,当我使用缩略图时,图像的高度不一致,如下所示:
<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/