Streaming live at 10am (PST)

Have Two Side by Side Images Retain Original Proportional Widths While Being Responsive

To save my life, I can’t seem to get two images to be side by side AND be the same height without stretching.

If you scroll about half way down to the “We believe that smiles are priceless and our mission is to rekindle connections through communication” section, I’d like both images on the left to be responsive with the size of the page while also being the same height. I think the issue might be related to the images being of unequal widths, but, ultimately, I’d like the two images to be side by side like the two images on the right.

Hope I explained this well enough.

https://preview.webflow.com/preview/newcommuniqai?utm_medium=preview_link&utm_source=designer&utm_content=newcommuniqai&preview=92edf9bed61020b30c77156a635d7511&workflow=preview

Thank you!

Add screenshot - very hard to understand your issue.

Maybe related:

Thank you for chiming in Ezra.

This image has been split in two parts—the heights are equal, but the widths are not. When I put these size by size in Webflow, they should look like the complete image, but this is not the case. I tried using object-fit like you noted, but it doesn’t appear to make a difference.

In Webflow:

GrandmotherSmileBroken

What the two side-by-side pictures should look like:

You should “split” again the photos on Photoshop (Or other software).

The aspect ratio of the left image diff from the right

If you want set the layout to grid - and change the right image height to 100% and position & fit cover

Without Photoshop - set the transform origin to left-top

1 Like

Thank you for the detail Ezra.

The ratios are different on purpose—left photo is 921x3000 and the right photo is 1078x3000. If I understand you correctly, I need to change the div block that the two images are in from flex to grid? Sorry for all the questions—I’m not a web developer by profession.

Thank you!

Yes (Less CSS - use 2 fr cols (the deafult setting)) and remove space between columns.

That appears to have done the trick! Thank you!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.