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

Question

我如何才能在 Twitter Bootstrap 3 的“img-responsive”图像的同时允许它们具有设置的高度，以便照片网格流动(与下图不同)？

我试过设置图像高度属性和最大高度属性，但它似乎忽略了那些，除非我用'!important'设置它的高度，但它们看起来很糟糕而且不是真正在网格中，因为它们需要这么小的水平空间。

我已经尝试了一些与将它们作为 div 和 overflow:hidden 的背景图像相关的技巧，但是我尝试过的所有方法 1) 都不起作用，并且 2) 看起来很老套3)看起来很乱。 (以 this one 为例)

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

这似乎是一种常见现象 - 是否有一种稍微简单的方法来处理它？<​​/p>

Answer 1

我不熟悉 bootstrap，但我相信你可以将每个 img 包装在一个 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 标签。

CSS:

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

请注意，IE 版本 8 及以下版本不支持背景大小，如果这对您来说很重要。