I’m trying to make a row of images be responsive while retaining their ratios, and always have equal height as each other. The files all have the same height, but different widths.
In my best attempt, they look correct on a large monitor. But once I shrink the viewport, things get weird. They don’t all scale down together. First, the 2nd image starts to shrink while the others stay the same. Then the 3rd image starts shrinking, and finally the 1st image shrinks. In the end, they all end up at different heights.
I’d like the entire row to shrink all together, and for all the images to always have the same height as each other. I’d also like these to remain as images and not backgrounds, so it’s accessible and so they don’t get cropped.
I’ve tested with Flexbox, Grid, and Quickstack, but I’m new to these features. I’ve tried looking through Webflow University and Webflow Forum, but haven’t found a clear answer.
Here is my read-only link:
https://preview.webflow.com/preview/amberweber?utm_medium=preview_link&utm_source=designer&utm_content=amberweber&preview=4410748f06a6f7c73eecd88c8fd9bbde&pageId=66572bedc6981583a83a4c84&locale=en&workflow=preview