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

Question

我如何推特Bootstrap 3的'img-responsive'图像,但允许它们设置一个高度,以便照片网格流动(与下图不同)？

我已经尝试设置图像高度属性和max-height属性,但似乎忽略了那些,除非我用'!important'设置它的高度,但是它们看起来很糟糕并且不是真的在网格中因为它们占用的很少水平空间.

我尝试过将它们作为div的背景图像相关的一些技巧overflow:hidden,但是,我尝试过的所有内容都不起作用,2)看起来很hacky 3)看起来搞砸了.(尝试通过这个,作为一个例子)

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

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

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及更低版本不支持后台大小,如果这对您很重要.

Answer 2

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

这样的CSS只有这样的方法..

http://bootply.com/85737

像这样的'clearfix'方法(需要每x列迭代一次)..

http://bootply.com/89910

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

http://bootply.com/109446

有关Bootstrap高度问题的更多信息