How to deal with portrait image in bootstrap image grid

Question

I'm facing a problem, while creating a bootstrap grid, with portrait images. When I use portrait images, it does not look good. If I only use landscape images, it looks as it should. How do I fix the issue?

Here is code:

<div class="col-md-3 col-sm-4 col-xs-6 thumb">
   <div class="thumbnail" href="#">
      <a href="#"><img class="img-responsive" src="http://placehold.it/400x266" alt=""></a>
      <div class="caption">                                                
        <a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
      </div>
   </div>
</div> 

<div class="col-md-3 col-sm-4 col-xs-6 thumb">
   <div class="thumbnail" href="#">
      <a href="#"><img class="img-responsive" src="http://placehold.it/400x266" alt=""></a>
      <div class="caption">                                                
        <a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
      </div>
   </div>
</div> 

<div class="col-md-3 col-sm-4 col-xs-6 thumb">
   <div class="thumbnail" href="#">
      <a href="#"><img class="img-responsive" src="http://placehold.it/266x400" alt=""></a>
      <div class="caption">                                                
        <a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
      </div>
   </div>
</div> 

 <div class="col-md-3 col-sm-4 col-xs-6 thumb">
   <div class="thumbnail" href="#">
      <a href="#"><img class="img-responsive" src="http://placehold.it/175x266" alt=""></a>
      <div class="caption">                                                
        <a href="#" class="btn btn-shopping btn-responsive"><i class="glyphicon glyphicon-shopping-cart"></i></a>
      </div>
   </div>
</div>

Here is Fiddle

I want to keep image height 266 for both portrait and landscape image but if i set height then its not responsive... — , Dec 01 '14 at 14:04
I suspect that the BS thumbnails aren't the best solution for your problem. You could maybe go with something like Masonry - that might work better for you. http://masonry.desandro.com/ — Billy Moat, Dec 01 '14 at 14:21

Salman A · Accepted Answer · 2015-05-04T08:28:07.357

Apparently, bootstrap stretches responsive images 100% wide but it does not constrain their height. Therefore images with different aspect ratio will end up with different heights (and the grid breaks).

The obvious solution is to set a fixed height on the image container and constrain + center the images inside the container.

Updated Fiddle #1
Fixed container height - 200px (notice what happens to wide images on narrow screens)

However, this creates another problem: the aspect ratio of the container now depends on screen width; on wider screens it will become wider and on narrow screens it will become taller, sometimes toooooo tall compared to the image.

I suggest using fixed aspect ratio container and constrain + center the images inside it.

@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css");

.thumbnail {
  display: block;
  padding-bottom: 100%;
  position: relative;
}
.thumbnail > .img-responsive {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <h1 class="page-header">Thumbnail Gallery (Square Container)</h1>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
      <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300" alt=""></a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
      <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/300x400" alt=""></a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
      <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300" alt=""></a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
      <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/300x400" alt=""></a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
      <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/640x360" alt=""></a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
      <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300" alt=""></a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
      <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/600x200" alt=""></a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
      <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300" alt=""></a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
      <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/640x360" alt=""></a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
      <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/200x600" alt=""></a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
      <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/400x300" alt=""></a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
      <a class="thumbnail" href="#"><img class="img-responsive" src="http://placehold.it/200x200" alt=""></a>
    </div>
  </div>
</div>

Updated Fiddle #2
Fixed container aspect ratio - 4:3 (the container grows proportionally with screen width)

hi thanks for you answer but if i resize window then there is big margin/space above and below... — , Dec 01 '14 at 14:38
I mean if i open page in iphone(480x320) then it does not look good there is space above and below image..for example see http://jsfiddle.net/cfxxdehz/2/embedded/result/ and resized browser — , Dec 02 '14 at 14:38
Yes, there will be space when you view a landscape image inside a tall column, ***how else would you show the images inside fixed height container and maintain proportions at the same time?*** — Salman A, Dec 02 '14 at 16:37
You probably need to look at alternate solutions. May be square thumbnails with contain/cover backgrounds. See: http://stackoverflow.com/a/27147484/87015, http://stackoverflow.com/a/26690674/87015 — Salman A, Dec 02 '14 at 16:41

score 0 · Answer 2 · answered Dec 01 '14 at 20:54

0

If you want the image height to stay 226px, but the images to resize and keep their aspect ratio, I think you'll need to switch to using background images, rather than <img> tags.

Fiddle

HTML:

<a href="#" style="background-image: url(http://placehold.it/400x266);"></a>

CSS:

.thumbnail > a {
    display: block;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 266px;
}

answered Dec 01 '14 at 20:54

cjspurgeon

1,497
11
20

thanks If i open page in iphone(480x320) then it does not look good there is space above and below image..for example see jsfiddle.net/cfxxdehz/2/embedded/result and resized browser – Dec 02 '14 at 14:43
You could change the height of the `a` element in an media query, or use Fiddle #3 from Salman A's answer above if you want a fixed aspect ratio instead of fixed height. – cjspurgeon Dec 02 '14 at 19:16

How to deal with portrait image in bootstrap image grid

2 Answers2