Fixing Div and Image Height Issue in Thumbnail Layout

Question

I have thumbnail DIVS that are simply an image with the product name below. Here's the code:

<div class="thumbs">
<a href="LINK"><img  src="IMAGE" /></a>
<div>Product Name</div>
</div>

The CSS is below:

.thumbs {
    float:left; width:210px; height:200px; text-align:center;
}

.thumbs div {
}

.thumbs img
{
    max-height: 115px;
    max-width: 100%;
}

Originally I had the images at 115px height so every row had the same height images and the text below was aligned correctly. Some of the images became too wide so I had to make a restriction on the max-width.

Problem: Since the image heights vary ... the text below the thumbnail varies in vertical placement. I want the text to be on the same line across the rows.

Example page: http://test.pillarsoflifebook.com/banquettes/designer-banquettes/ *Note the first 3 thumbnails are the same height .. thus the names below them are aligned

Any thoughts?

If you are generating the page from a database of images' (etc.) information, then you could store the dimensions of the images and calculate a CSS `padding` in the code on a per-image basis. — Andrew Morton, Apr 03 '14 at 21:59

John · Accepted Answer · 2014-04-03T22:57:09.293

2

You could solve this by wrapping the images in a div (or setting your anchor to display: block) and setting a max-height or height on that wrapper, and setting it to overflow: hidden.

Here's a jsFiddle example that will force the thumbnail blocks to always display the same regardless of the size of the image.

Edit: Updated example with some of your images.

Edit2: To vertically align the image inside the anchor, set the line-height of the anchor equal to its height (in this case line-height: 115px;), and set vertical-align: middle; on the img itself. Updated example including this fix here.

edited Apr 03 '14 at 22:57

answered Apr 03 '14 at 21:23

John

3,357
1
17
15

This worked great! Only issue is a few of the images are at the top of the Div now. Any way to have them at the bottom (near the text) but padded a bit besides manually adding it to a few of the images? Example Calypso and Metro Banquettes - notice how they're at the top of the div and far from the text. http://test.pillarsoflifebook.com/banquettes/designer-banquettes/ – user40823 Apr 03 '14 at 22:48
@user40823 Ah, yeah. Vertical aligning is always a tricky thing to figure out, but you can utilise the [fix outlined here](http://stackoverflow.com/questions/10008670/vertical-align-image-in-div). The two key adjustments you need to make: add a `line-height: 115px;` (i.e. the same as the containing element's height) to the anchor, and `vertical-align: middle;` to the `img` itself. [Updated my example here](http://jsfiddle.net/johntobinme/R5T5P/2/), and I'll edit this into my answer as well! – John Apr 03 '14 at 22:55

score 1 · Answer 2 · edited May 23 '17 at 11:43

If you are using CSS3, you can use css3 translate property.

This Re-sizes based on whatever is bigger. If your height is bigger and width is smaller than container, width will be stretch to 100% and height will be trimmed from both side. Same goes for larger width as well.

.thumbs {
    width:210px;
    height:200px;
    position:relative;
    display:inline-block;
    overflow:hidden;
}

.thumbs > .thumbs img {
    position:absolute;
    top:50%;
    min-height:100%;
    display:block;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    min-width:100%;
}

Example: http://jsfiddle.net/shekhardesigner/aYrhG/

Answer from CSS: How can I set image size relative to parent height?

Fixing Div and Image Height Issue in Thumbnail Layout

2 Answers2