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

【问题标题】：How to make a responsive grid of photos using Twitter Bootstrap if heights are different如果高度不同，如何使用 Twitter Bootstrap 制作响应式照片网格
【发布时间】：2014-02-25 14:02:20
【问题描述】：

我如何在 Twitter Bootstrap 3 的“img-responsive”图像上设置高度，以便照片网格可以流动（与下图不同）？

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

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

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

这似乎是一种常见的情况 - 有没有一种简单的方法来处理它？

【问题讨论】：

见how to replicate pinterest.com's absolute div stacking layout和Masonry
@Boaz - 这很有趣 - 会试一试。但这允许不同高度的图像 - 有没有办法让它实际上成为一个网格？
通常，这将通过将所有图像裁剪为定义的比例来完成。
@CharlieS - 显然我可以裁剪图像 - 但我不认为这是唯一的方法，如果没有必要，我宁愿不这样做。
@Dave 这样做有很大的优势——我发布了一个答案，欢迎您对此提出任何批评或问题。

标签： html css twitter-bootstrap responsive-design photo-gallery

【解决方案1】：

Bootstrap 中有 3 种解决网格对齐/高度问题的总体方法

像这样的纯 CSS 方法..

http://bootply.com/85737

像这样的“clearfix”方法（需要每 x 列迭代一次）..

http://bootply.com/89910

最后，您可以使用 Isotope 或 Masonry 插件。这是一个使用 Isotope + Bootstrap 3 的工作示例：

http://bootply.com/109446

More on the Bootstrap height issue

【讨论】：

我很想使用 CSS 方法，但第一个或第二个示例都没有显示网格 - 图像都有不同的高度，下面有空格......等等。
@Dave -- clearfix 解决方案仅用于清除浮动，而不是创建类似砖石的布局。

【解决方案2】：

我不熟悉引导程序，但我相信您可以将每个 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 及以下版本不支持背景大小，如果这对您很重要的话。

【讨论】：

这不起作用。随着照片缩小，由于窗口较小，水平图像不会填满整个高度，所以看起来仍然和上面的照片一样。
background-size: cover; 是一个很棒的工具。您必须将任何 <a> 标签包裹在您的 divs 或您拥有的东西周围，但这在 HTML 5 中是允许的。
使用上面的背景尺寸方法，您将在较大的屏幕上略微放大图像，这并不总是看起来很糟糕。如果它看起来很糟糕，解决这个问题的最简单方法是包含更大的图像，或者进行一些 javascript 或媒体查询检测以加载更高分辨率的源文件。
@Charlie S - 或者只使用带有背景的a标签并显示块
@Zougen - 三段代码如何协同工作？全部 3 个，还是只是最新的“编辑”？（如果没有 HTML 可参考，很难说出你要做什么）

【解决方案3】：

还没有人建议裁剪，所以我会投入我的 2 美分。

我会在具有较大不规则版本的图像的网格版本上使用预定义的宽度 x 高度。实际上，即使较大的版本不是不规则我可能仍然会这样做。底层标记仍然是一个网格，无论是 Foundation、Bootstrap 还是其他任何东西。

通过这种方式，您始终可以链接到大尺寸/原始尺寸，并在适当的情况下使用网格或缩略图。对于静态站点，我会手动执行此操作，对于动态站点，我会使用自动为我提供不同样式的图像处理器，例如example.com/image-styles/thumb/photo.jpg。

显然不同的图像需要以不同的方式裁剪，但如果您不关心裁剪发生的位置，您可以将图像设置在 div 和 overflow: hidden; 整个事情：http://jsfiddle.net/785gN/

这样做的缺点是您假设所有图像都是方形或横向的，而不是纵向的（反之亦然）。或者，按照建议使用带有background-size: cover; 的背景图像。

【讨论】：