如果高度不同，如何使用Twitter Bootstrap创建响应式网格的照片 [英] How to make a responsive grid of photos using Twitter Bootstrap if heights are different

问题描述

我如何使用Twitter Bootstrap 3的img-responsive图片，但允许他们有一个设置的高度，以便照片的网格会流动（不像下面的图片）？

我已经尝试设置图像的高度属性和max-height属性，但似乎忽略这些，除非我用'！important'设置它的高度，但是它们看起来很糟糕，而不是在网格中，因为他们

我已经尝试过将它们作为div的背景图片的一些技巧， overflow：hidden ，但我试过的一切1）不工作，2）似乎hacky 3）看起来搞砸了。 （尝试通过这一个为例） / p>

这些图片比他们填充的区域略大，因为我希望他们能够在大型显示器上显示更大的图片，所以即使我得到了背景图片的东西工作，它会显示图像的放大版本，因为背景不知道按比例缩小适合。

这似乎已经是一个常见的事情 - 有一个简单的方法来处理吗？

解决方案

我不熟悉bootstrap， img 在 div.wrapper 中，并将这样的内容应用到divs：

  div.wrapper {
 width：33％; 
 height：200px; / *或任何... * / 
 overflow：hidden; 
 float：left; 
} 
  

然后处理图片缩放：

  .wrapper img {
 max-width：100％; 
 height：auto; 
} 
  

编辑 - 备用方法

要实现你想要的，我认为最好的方法是使用背景图片替代一个替代的元素， background-size：cover ，而不是img标签。

HTML：

 < a href =path / to /full_size.jpgclass =imagestyle =background-image：url（path / to / image.jpg）;>链接文字< / a> 
 

对网格中的每个图像重复，而不是使用 img 标签。

CSS：

  .image {
 display：块; 
 text-indent：-1000px; / *隐藏链接文本* / 
 overflow：hidden; 
 background-size：cover; 
 width：33％; 
 height：200px; 
 float：left; 
} 
  

请注意，IE 8及以下版本不支持背景大小事情对你。

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)?

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.

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)

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?

解决方案

I'm not familiar with bootstrap, but I'm sure you could wrap each img in a div.wrapper, and apply something like this to the divs:

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.

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 img tags.

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.

这篇关于如果高度不同，如何使用Twitter Bootstrap创建响应式网格的照片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！