Displaying a row of logos can be tricky due to their varying shapes and sizes. In my latest post, I share how I approach building the perfect logo strip by adjusting logo heights based on aspect ratios.
We've all been there: you're working on a website and need to display a row of logos—clients, partners, sponsors—you name it. However, logos come in all shapes and sizes, and making them look good together can be quite challenging. How do you get...
@nilsbinder I don't like magic numbers, so I wondered: what if we'd just scale things based on the difference between the area of a square icon of a desired height, and the image's dimensions?
https://codepen.io/kizu/pen/qBeBJvX?editors=0100
This way, the final area of every logo is the same. Things are smaller in general, and some logos could benefit from bumping them up to align their size optically, but not sure if that_ could be done automatically, at least with just CSS :)
@kizu Yes, you're absolutely right.
I would like to make one final adjustment. I will reintroduce a "magic number," but this time it is called ---strength, and you can adjust the effect to your liking. When set to 1, you get the result you had in your pen; when set to 0, all icons have the same height. This way, I think it becomes a more flexible component rather than relying on a fixed magic number:
Nils Binder
Roma Komarov
