Madlozoz Madlozoz - 1 year ago 88
CSS Question

2 pictures filling full width with the same height


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 Source

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="" alt="" class="image" />
  <img src="" alt="" class="image" />

Hope this helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download