twitter-bootstrap 如果高度不同，如何使用 Twitter Bootstrap 制作响应式照片网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21504418/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a responsive grid of photos using Twitter Bootstrap if heights are different
提问by Dave
How can I Twitter Bootstrap 3's 'img-responsive' images, but allow them to have a set height so that a grid of photos will flow (unlike the below image)?
我如何才能在 Twitter Bootstrap 3 的“img-responsive”图像上设置高度，以便照片网格可以流动（与下图不同）？
I've tried setting the image height attribute, and max-height attribute, but it seems to ignore those unless I set it's height with '!important', but then they look bad and not really in a grid because they take up so little horizontal space.
我已经尝试设置图像高度属性和 max-height 属性，但它似乎忽略了这些，除非我用 '!important' 设置了它的高度，但是它们看起来很糟糕而且不是真的在网格中，因为它们占用的很少水平空间。
I've tried a few tricks related to putting them as background images of divs, and overflow:hidden, but everything I've tried 1) doesn't work, and 2) seems hacky 3) looks messed up. (tried going through this one, as an example)
我尝试了一些与将它们作为 div 的背景图像相关的技巧overflow:hidden，但是我尝试过的一切 1) 不起作用，2) 看起来很糟糕 3) 看起来很糟糕。（尝试过这个，作为例子）
The images are slightly bigger than the area they fill, as I want them to be able to show bigger on large monitors, so even if I did get the background image thing to work, it would be showing a zoomed-in version of the image, since the background doesn't know to scale-down to fit.
图像比它们填充的区域稍大，因为我希望它们能够在大型显示器上显示得更大，所以即使我确实让背景图像起作用，它也会显示图像的放大版本，因为背景不知道缩小以适应。
This seems like it HAS to be a common occurrence - is there a somewhat simple way to handle it?
这似乎很常见 - 有没有一种简单的方法来处理它？
采纳答案by Josh Harrison
I'm not familiar with bootstrap, but I'm sure you could wrap each imgin a div.wrapper, and apply something like this to the divs:
我不熟悉引导程序，但我确定您可以将每个都包装img在 a 中div.wrapper，并将这样的内容应用于 div：
div.wrapper {
width: 33%;
height: 200px; /* or whatever... */
overflow: hidden;
float: left;
}
Then to handle image scaling:
然后处理图像缩放：
.wrapper img {
max-width: 100%;
height: auto;
}
EDIT - ALTERNATIVE METHOD
编辑 - 替代方法
To achieve what you want I think the best way will be to use background images on an alternative element, with background-size: cover, instead of img tags.
为了实现您想要的效果，我认为最好的方法是在替代元素上使用背景图像，使用background-size: cover, 而不是 img 标签。
HTML:
HTML：
<a href="path/to/full_size.jpg" class="image" style="background-image: url(path/to/image.jpg);">Link Text Here</a>
Repeat for each of your images in the grid, instead of using imgtags.
对网格中的每个图像重复，而不是使用img标签。
CSS:
CSS：
.image {
display: block;
text-indent: -1000px; /* hide link text */
overflow: hidden;
background-size: cover;
width: 33%;
height: 200px;
float: left;
}
Note that background size is not supported in IE versions 8 and below, if that matters to you.
请注意，IE 8 及以下版本不支持背景大小，如果这对您很重要。
回答by Zim
There are 3 overall approaches to grid alignment / height issues in Bootstrap
Bootstrap 中有 3 种整体方法来解决网格对齐/高度问题
A CSS only approach like this this..
像这样的 CSS 唯一方法..
A 'clearfix' approach like this this (requires iteration every x columns)..
像这样的“clearfix”方法（需要每 x 列迭代一次）。
Finally, you could use the Isotope or Masonry plugin. Here is a working example that uses Isotope + Bootstrap 3:
最后，您可以使用 Isotope 或 Masonry 插件。这是一个使用 Isotope + Bootstrap 3 的工作示例：
回答by Charlie Schliesser
No one has suggested cropping yet, so I'll throw my 2 cents in.
还没有人建议裁剪，所以我将投入 2 美分。
I would use a predefined width x height on the grid version of images that have a larger, irregular version. Actually, even if the larger version wasn'tirregular I'd probably still do this. The underlying markup would still be a grid, be it Foundation, Bootstrap, whatever.
我会在具有更大、不规则版本的图像的网格版本上使用预定义的宽度 x 高度。实际上，即使较大的版本不是不规则的，我可能仍然会这样做。底层标记仍然是一个网格，无论是 Foundation、Bootstrap 还是其他任何东西。
This way you can always link to the large / original size and use grid or thumbnail images where appropriate. For a static site I would do this by hand, for a dynamic site I'd use an image processor that gives me different styles automatically, e.g. example.com/image-styles/thumb/photo.jpg.
通过这种方式，您可以始终链接到大/原始尺寸，并在适当的情况下使用网格或缩略图。对于静态站点，我会手动执行此操作，对于动态站点，我会使用图像处理器自动为我提供不同的样式，例如example.com/image-styles/thumb/photo.jpg.
Obviously different images need to be cropped differently, but if you don't care about wherethe crop happens, you could just set the image inside of a divand overflow: hidden;the entire thing: http://jsfiddle.net/785gN/
显然，不同的图像，需要采用不同的裁剪，但如果你不关心那里的作物发生了，你可以只设定的图像内div和overflow: hidden;整个事情：http://jsfiddle.net/785gN/
The downside to that is you're assuming all images are square or landscape, not portrait (or vice versa). Alternatively, use a background-image with background-size: cover;as has been suggested.
不利的一面是您假设所有图像都是方形或横向，而不是纵向（反之亦然）。或者，使用background-size: cover;已建议的背景图像。
