Scale different width images to fit a row and maintain equal height

Question

I have three images which are all different widths, but each the same height.

I want these images to be in a responsive row so that the

Answer 1

My first approach to this would be to create three divs within a container div. Assign a height and a width of 33.33% to each of the three (and a float:left;) and 100% width to the container. Then set your three images to be the background of those three divs with the correct background properties such as

background-size:cover;

It might cut off bits of your images depending on the width of the screen but I don't think you will be able to get around that with images that are not the exact same size.

HTML

CSS

.container{
   width:100%;
}
.image{
   float:left;
   width:33.33%;
   background-size:cover;
   background-repeat: no-repeat;
}