Fixing Div and Image Height Issue in Thumbnail Layout - css

Question

I have thumbnail DIVS that are simply an image with the product name below. Here's the code:
<div class="thumbs">
<img src="IMAGE" />
<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?

Answer 1

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.

Answer 2

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?