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?

Answer 1

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%;}