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

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

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

...




...

我还创建了一个简单的JSFIDLE，在这里展示了这个问题：

---

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

您可以使用CSS类强制这样做

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

---

恐怕这个问题没有一个简单的答案

引导的工作方式是将

最大宽度：100%

分配给

img

。在您共享的示例中，它们都由其父级的宽度（span4）保留。同样，父母从图像中获取他们的高度，因此您甚至不能将图像设置为

minheight:100%

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

您可以使用JavaScript强制图像的高度（尽管您还需要强制删除

max width

属性），但这意味着您不再从正在使用的引导中获取网格

我希望通过多一点JavaScript，您可以：

• 将父对象（锚或lis）设置为

  overbox-x:
  隐藏的

• 强制所有图像的高度相同

这意味着您的所有图像高度相等，但您会丢失任何较宽图像的右边缘

最后一个选择是通过CSS强制设置图像的高度和宽度，尽管这也意味着会降低图像的纵横比

---

不过有一个好消息：只要您使用

class=“row”

或

class=“row fluid”

，它们至少会被清除属性，因此如果您有多行图像，即使图像高度不相等，也不会出现严重的浮动边问题。

您应该在服务器上以相同大小保存所有缩略图，我的意思是：相同的纵横比+图像大小（分辨率）。所有这些都只是为了缩略图，然后打电话给bootstrap来处理所有的工作（设置缩略图的样式）。我很感激你回答的细节，我用缩略图CSS做了一些测试，确认了你描述的许多问题，在你回答之后我更好地理解了原因。我决定在服务器端调整图像大小，然后在使用缩略图时显示相同大小的图像。谢谢嗨@steve gregory，很高兴听到你能解决这个问题！如果你将来有任何问题，请随时提出另一个问题。