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.
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:
What the two side-by-side pictures should look like:
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.
