Vertically Center Constrained Image in Bootstrap Thumbnail

Vertically center constrained image in Bootstrap thumbnail

Approach 1 - (example):

Wrap the img elements:

<div class="thumbnail" style="width: 400px; height: 400px">
    <div class="thumbnail_wrapper">
        <img src="http://i.minus.com/iucsUZfSM9v45.gif"/>
    </div>
</div>

Change the display of the .thumbnail element to table. Use border-collapse: separate to fix padding/spacing issues. Change the display of the wrapper to table-cell and then add vertical-align: middle. Finally, give the img elements a width of 100%.

Example Here

.thumbnail {
    display:table;
    border-spacing: 2px;
    border-collapse: separate;
    border-radius:10px; /* Demonstrational.. */
}
.thumbnail_wrapper {
    display:table-cell;
    vertical-align:middle;
}
.thumbnail_wrapper > img {
    width:100%;
}

---

Approach 2 - (example):

The flexbox approach doesn't require the wrapper element, however it has slightly less support than the table/table-cell approach.

<div class="thumbnail" style="width: 400px; height: 400px">
    <img src="http://i.minus.com/iucsUZfSM9v45.gif" />
</div>

Basically, just change the display of the .thumbnail element to flex and then add align-items: center. All the other vendor prefixes are added for cross browser support. Read more about flexbox layouts and properties here - (mdn).

Example Here

.thumbnail {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

---

As a side note, you can avoid having to use HTML tables - example here.

Bootstrap 3 vertical align image in thumbnail

I assume you wanted to achieve something like this, using different-sized images?

I've looked and looked for a simple answer to this and nothing ever seemed to work well, so I managed to take a few bits and hack something together.

It's a little convoluted but it works really well for me, and also resizes and centers both landscape and portrait images. It also lets me set the dimension ratios I want the image to be (adjust the padding-top percentage in ".thumb:before").

Bootply Example at 1/1 ratio (square). (click on the image to see the original)

Bootply Example at slight portrait ratio (125%)

This needs two custom css classes.

The 'thumb' class is assigned to the div and the image url is set as a background.

Since it's poor form to embed a div inside an anchor tag, I also created a 'clickable' class, which takes the inside anchor tag, sizes it to the parent container, and floats it above the parent so that it mimics clicking the image.

HTML:

<div class="col-xs-1">
  <div class="clickable thumb" style="background-image: url('http://auduno.github.io/clmtrackr/media/audrey.jpg')">
    <a href="http://auduno.github.io/clmtrackr/media/audrey.jpg">
    </a>
  </div>
  <div class="text-center"><small>Product 15</small></div>
</div> 

CSS:

.thumb{
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size:cover;
  position:relative;
  width:100%;
  border:1px solid #BBB;
}
.thumb:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.clickable > a{
  position:absolute; 
  width:100%; 
  height:100%; 
  top:0; 
  left:0; 
  text-decoration:none; /* Makes sure the link doesn't get underlined */ 
  z-index:10; /* raises anchor tag above everything else in div */

  /* For IE */
  background-color:white; /*workaround to make clickable in IE */ 
  opacity: 0; /*workaround to make clickable in IE */ 
  filter: alpha(opacity=1); /*workaround to make clickable in IE */
  //from http://blog.avtex.com/2012/01/27/how-to-make-an-entire-div-clickable-with-css/
}

Bootstrap Thumbnail Image Spacing

I fixed the problem by adding padding: 0px !important; to .thumbnail, it need the !important

Adjusting and image size to fit a div with Bootstrap

You can explicitly define the width and height of images, but the results may not be the best looking.

.food1 img {
    width:100%;
    height: 230px;
}

jsFiddle

---

...per your comment, you could also just block any overflow - see this example to see an image restricted by height and cut off because it's too wide.

.top1 {
    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.top1 img {
    height:100%;
}

bootstrap: Get three thumbnail images inline

Regarding the Boostrap layout:

http://getbootstrap.com/components/#thumbnails

The .thumbnail class is only doing formatting (the border, padding); the alignment of the images is actually happening from the .row and the .col-md-3 classes.

It's OK when using Bootstrap to mix your own CSS in with theirs, to handle layouts they don't provide. In this case, here's some CSS which might help:

.thumbnails img {
    float: left;
    margin-right: 10px;
    display: block;
}

which will work with:

<div class="thumbnails">
    <img src="..." />
    <img src="..." />
    <img src="..." />
</div>

Example: http://jsfiddle.net/sifriday/kg5uewqt/

I've used .thumbnails to avoid conflicting with the Boostrap .thumbnail. Which means you can mix-and-match to get the Boostrap look and feel:

<div class="thumbnails">
    <img class="thumbnail" src="..." />
    <img class="thumbnail" src="..." />
    <img class="thumbnail" src="..." />
</div>

Example: http://jsfiddle.net/sifriday/kg5uewqt/1/

---

Related Topics