Bootstrap 3 thumbnail: both vertically and horizontally centered image

Question

I have several Bootstrap 3 thumbnails. I want them to be the same size, so I've fixed their height and width. They will be showing different images with different sizes and proportions, and I want them centered both vertically and horizontally. When an image is too large to fit inside its container, I would like it to be scaled down.

I've found a partial solution using transform: translate(-50%, -50%); in this handy post, but it does not work for tablets nor sites like jsfiddle. In fact, fixed height does not work there either. I'm trying to figure out a good cross-browser compatibility.

jsfiddle link

@import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css');
@import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css');

.thumbnailcontainer
{
    height: 40rem;    
    width: 20rem;
}

img
{
    max-height: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

    <div class="row">
    
    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">
    <div class="thumbnail">
      <img src="http://animalia-life.com/data_images/mammal/mammal4.jpg" alt="image">
      <div class="caption">
        <div class="thumbnailheader"><h3>Lorem ipsum</h3></div>
        <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
    </div>
    
    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">    
    <div class="thumbnail">
      <div class="img-container">
        <img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="image">
      </div>
      <div class="caption">
        <div class="thumbnailheader"><h3>Lorem ipsum.</h3></div>
        <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
    </div>
        
    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">    
    <div class="thumbnail">
      <img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Leaning_Tower_of_Pisa_(April_2012).jpg" alt="image">
      <div class="caption">
        <div class="thumbnailheader"><h3>Lorem ipsum.</h3></div>
        <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
    </div>
        
  </div>

Any ideas?

Bootstrap framework handles centering content. The framework also plays pretty well with `display: flex;`, which I often use for centering items. That said, try not to fight the framework, the people at twitter really thought of many edge-cases. — Dan Beaulieu, Jun 11 '15 at 13:48

score 1 · Answer 1 · edited May 23 '17 at 12:22

First your css is changing every image not just the ones in the thumbnail which is not a good practice. But I used your current code to come up with an answer.

.thumbnail img { height:100px; width:100%;}

You need to define the width to 100% and give it specific height. Then you need to add responsiveness to your images. Add img-responsive class. You also need to center image and bootstrap 3 does that for you with the class: center-block

<img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="image" class="img-responsive center-block">

jsfiddle

To keep the thumbnail the same height: helpful Link

Jsfiddle - 2

   <div class="row">
    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">
     <div class="thumbnail">
        <img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="image">
       <div class="caption">
         <div class="thumbnailheader"><h3>Lorem ipsum</h3></div>
         <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
  </div>

    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">    
    <div class="thumbnail">
      <div class="img-container">
        <img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="image" class="img-responsive center-block">
      </div>
      <div class="caption">
        <div class="thumbnailheader"><h3>Lorem ipsum.</h3></div>
        <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
    </div>

    <div class="col-sm-4 col-md-3 col-lg-2 thumbnailcontainer">    
    <div class="thumbnail">
      <img src="http://upload.wikimedia.org/wikipedia/commons/8/84/Leaning_Tower_of_Pisa_(April_2012).jpg" alt="image" class="img-responsive center-block">
      <div class="caption">
        <div class="thumbnailheader"><h3>Lorem ipsum.</h3></div>
        <p>Lorem ipsum ad his scripta blandit partiendo.</p>
        <p><a href="#" class="btn btn-default center-block" role="button">Open</a></p>
      </div>
    </div>
    </div>

  </div>

your css:

@import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css');
@import url('http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css');

.thumbnailcontainer
{
    height: 40rem;    
    width: 20rem;
}
.thumbnail img { height:100px; width:100%;}

Yes, in my original code I have img-responsive and of course I do not apply that css to all images. This was only an example. The thing with you solution is that the thumbnails are different heights and the images are the same size. What I'm trying to achieve is to have all thumbnails (the containers) the same size, and the images (keeping their proportions, not stretched) scaled down to fit the image container. — dvilela, Jun 11 '15 at 13:26
@derkomai Bootstrap is a great framework. A quick tip to consider... When you're about to write a utility class or need some sort of general rule (like centering an image). Before you do it Google it (for example) "bootstrap center image", I've found dozens of little classes that exist in the framework that have made my life easier. — Dan Beaulieu, Jun 11 '15 at 13:44
Thank you both! @CodingEnthusiast, the new fiddle renders the same to me (using Chrome 43). I see the new javascript, but the result is the same. — dvilela, Jun 11 '15 at 13:52
@derkomai googled it and found this: http://stackoverflow.com/questions/9278569/equals-heights-of-thumbnails — Coding Enthusiast, Jun 11 '15 at 14:06
Thank you, @CodingEnthusiast, I'm trying to make it work but no luck so far. I'll give another try today, but for now images either overlap titles despite the max-height, max.width, or thumbnail container get stretched. May be I should try the jQuery solution they propose at that link, but first I would like to try a CSS-only solution. — dvilela, Jun 15 '15 at 09:46

Bootstrap 3 thumbnail: both vertically and horizontally centered image

1 Answers1

jsfiddle

Jsfiddle - 2