Responsive images gallery bootstrap 3

问题

I am trying, a few days now, to make a gallery with images with slightly different size, but with the same layout.

As I can make it work in md view by forcing a 400px max-width for the container div, the workaround would create a gap below each image in xs and sm views.

What I want to achieve is have a gallery with images of same max-width and same max-height, and of course, not distorted. http://www.bootply.com/qsy3HNl8DK

Non responsive layout example:

http://jsfiddle.net/npek7uxh/

<div class="container">
    <img class="img-responsive" src="http://placehold.it/400x610" />
</div>

回答1:

Try using some CSS media queries to target exactly the xs and sm views. These are the sizes used by bootstrap: - lg: >1200px - md: >992px - sm: >768px - xs: <768px

So this code will target exactly sm and xs:

@media (max-width: 992px) {
 img {
  margin-bottom:0;
 }
}

回答2:

The html is a bit convoluted, but you can do this without any custom CSS. In short, you combine clearfix with visble-xs/sm/md/lg to insert a clearfix to reset the row at the right spot, but only visible on specific devices.

i.e. you insert it after every 2 images on xs <div class="clearfix visible-xs"></div> and every 3 images only for sm <div class="clearfix visible-sm"></div> and every 4 images for xs (because it's a factor of 2) and md and lg <div class="clearfix visible-xs visible-md visible-lg"></div>.

Example: http://www.bootply.com/6BkXDk68Cu

来源：https://stackoverflow.com/questions/27358977/responsive-images-gallery-bootstrap-3