How to make two images of different width, fit the same height

[anthonysalamin]

Hello,

I have a really simple question… I have two images with two different width. I would like to align them next to each others and have them take the same height. How can I achieve this without custom code within Webflow ?

I did try to set the picture’s height to 100% of its div container, but that means I have to set a specific pixel value for that div… resulting in a more or less precise behaviour of what I wish to achieve… there will always be a red margin (see sreenshot…)

Also, because the height of the container is in pixel, the height is therefore fixed on all devices and not responsive… my mind just can’t get the right solution right now for what looks like a very simple problem

Here is the read-only simplified version:https://preview.webflow.com/preview/same-image-height?utm_source=same-image-height&preview=5d4a800fd9dc94bb469a89a9d11f7e74

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[avivtech (Aviv Shwartz)]

Hi @anthonysalamin,

Since the photos are not with the same ratio, to do so you will have to lose part of the photo.
Best way will be to give both of them max-height: 100% and then give the parent div overflow: hidden

[dram (Alex Dram)]

The simplest way is make use of object-fit property.

Create an embed, paste this inside:

<style>

.img-cover {
  object-fit:cover;
}

</style>

select your image, give it class of img-cover. Now give it width of 50% and height 100%. Done.

edit: as with any image that is resizeable you will need to make sure the central focus object is more or less in the center of the image otherwise important parts (like heads! :D) can be cut off.