Madlozoz Madlozoz - 21 days ago 7
CSS Question

2 pictures filling full width with the same height

Bonjour,

I have 2 pictures and I would like to display those side by side.

I would want them to fill the whole width of the container and to have the same height.

enter image description here

Do you have any idea how to do it?

I'd want to preserve image ratio.

The green frame represent my container (probably some div)

Thanks in advance.

Answer

Use max-height and give the value to it - the minimum value of height compared to both the images max-height: minimum-image-height(from both images).

Have a look at the snippet below:

.image {
  max-height: 200px;
}
<div class="box">
  <img src="http://placehold.it/200x200" alt="" class="image" />
  <img src="http://placehold.it/300x600" alt="" class="image" />
</div>

Hope this helps!