0

大多数时候，当我使用缩略图时，图像的高度并不统一，如下所示：

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

那么，如何强制我所有的缩略图共享完全相同的高度并更改它们的宽度，忽略并保持纵横比？

4

2 回答 2

0

您可以使用 CSS 类来强制它

img { width: 200px; height: 200px; }
于 2013-05-24T12:41:12.423 回答
0

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

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

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

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

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

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

这意味着您所有的图像都是等高的，但是您会松开任何更宽的图像的右侧边缘。

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

一个好消息：只要你使用class="row"or class="row-fluid"，它们至少会被清除属性，所以如果你有几行它们，即使图像不等高，你也不会遇到令人讨厌的浮动边缘问题.

于 2013-05-24T12:46:15.447 回答