如果高度不同，如何使用 Twitter Bootstrap 制作响应式照片网格

如何使用 Twitter Bootstrap 3 的“img 响应式”图像，但允许它们具有设定的高度，以便照片网格流动（与下图不同）？

我尝试过设置图像高度属性和最大高度属性，但它似乎会忽略这些属性，除非我用“！重要”设置它的高度，但它们看起来很糟糕并且不是真正在网格中，因为它们占用的空间太小水平空间。

我尝试了一些与将它们作为 div 的背景图像相关的技巧，并且overflow:hidden，但我尝试过的所有方法 1) 都不起作用，2) 看起来很老套 3) 看起来很混乱。 （尝试通过this one https://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image， 举个例子）

图像比它们填充的区域稍大，因为我希望它们能够在大显示器上显示更大，所以即使我确实让背景图像工作，它也会显示图像的放大版本，因为背景不知道缩小以适应。

这似乎是一种常见现象——有没有一种简单的方法来处理它？

我不熟悉引导程序，但我相信你可以包装每个img in a div.wrapper，并将类似的内容应用于 div：

div.wrapper {
    width: 33%;
    height: 200px; /* or whatever... */
    overflow: hidden;
    float: left;
}

然后处理图像缩放：

.wrapper img {
    max-width: 100%;
    height: auto;
} 

编辑-替代方法

为了实现你想要的，我认为最好的方法是在替代元素上使用背景图像，background-size: cover，而不是 img 标签。

HTML:

<a href="path/to/full_size.jpg" class="image" style="background-image: url(path/to/image.jpg);">Link Text Here</a>

对网格中的每个图像重复此操作，而不是使用img tags.

CSS:

.image {
    display: block;
    text-indent: -1000px; /* hide link text */
    overflow: hidden;
    background-size: cover;
    width: 33%;
    height: 200px;
    float: left;
}

请注意，如果您很关心，IE 8 及更低版本不支持背景大小。