HTML/CSS to make an image container the same size as those next to it

Question!

I have a row of images and product descriptions. It looks like this: enter image description here

The image on the right obviously has a smaller height than the two preceding it. I'd like to make it look more like this:

enter image description here

But I'm at a bit of a loss as to how. Here are the caveats:

  1. I don't know the dimensions of the images in advance, these are being called in via AJAX from my database
  2. I don't want a javascript solution, I'd much much prefer a CSS-based solution.
  3. I'm using Bootstrap, if that has any bearing here.
  4. This is built using AngularJS' ng-repeat where one repeat equals one 'product', as in the images above. Thus creating a <tr> which contains the row of images and simply giving them vertical-align="middle" won't work here.

Because of the last factor, I'm assuming it won't be possible to do this without javascript. Here's a JSFiddle which has the code inside:

http://jsfiddle.net/CTVZR/5/

Any ideas/solutions? I'd gladly display them in a table if it were possible but I can't think of a way how.



Answers

With JS, you need to loop and check for the highest and apply this value to the others

$(document).ready(function(){
    var maxHeight = 0;
    $('.searchImgContainer').each(function(){
        if($(this).height() 


The simplest solution I would think of would be to give height a certain value and position:relative and to images inside them give position:absolute, bottom:0 and max-height the same as height of the container. Give it a try.



You can use table and table-cell display.

jsFiddle Demo

.row {
    display: table;
}
.col-xs-4
{
    display: table-cell;
    float: none;
    vertical-align: bottom;
}
By : Itay


This video can help you solving your question :)
By: admin