Equal image height inside grid

Hey everyone,
I created a grid to showcase a company logo and corresponding address, however I cannot figure out how to make the logos in the grid the same height. I’ve tried flexbox, fixed heights in % and px, explored adding additional divs and added the logos as background images, but that just resulted in them being stretched and distorted.

Currently they are all different heights, but I’m hoping to have them all the same. Ideally they’d also be responsive and automatically resize based on the viewport.

What’s the best way to achieve this?


Here is my site Read-Only: Webflow - Building Supplies Landing page

https://building-supplies-landing-page.webflow.io/

Hi @alexpiros,

Try setting a max-height (for example: 40px) on the ‘logo location’ image element.

Here’s a quick demo: Screen Recording 2022-05-19...

Hope this helps!

That did the trick, thank you so much! :clap:

1 Like