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


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:

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


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

    var maxHeight = 0;

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;
    display: table-cell;
    float: none;
    vertical-align: bottom;
By : Itay

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