Method 1: max-width & max-height
Method 2: Equalized px² area
This page compares two different CSS techniques for sizing images that have a variety of different aspect ratios – a common problem when composing a field of logos or other irregularly-sized images.
The first approach simply sets max-width and max-height values for the images. This technique can be useful, however it makes wide or tall images appear small compared to more squarish images, since their surface areas are so different.
The second, more advanced approach is based on code by Piper Haywood, written after I asked about sizing images based on area with CSS. With this technique, the images still have different aspect ratios, heights, and widths, but they all occupy similar amounts of surface area in px². As such, they have roughly comparable prominence, visually, when shown together.
max-width & max-height
Method 2 approximates similar surface areas but without a proper sqrt() function in CSS, it is not exact. For more info on the code, see Piper Haywood’s explanation.
Below is the same test but with the actual logos showing instead of generic rectangles. The logo files are borrowed from the sponsor listing for the Typographics design festival.
max-width & max-height
The area-based results of Method 2 aren’t perfect because they don’t factor in negative space within the logo graphics, but overall the sizes feel much closer to each other, visually, than Method 1.
It’d be great to one day be able to specify something in CSS like img {area: 500sqpx;} and have it work based on the image’s dimensions.
Many thanks to Piper Haywood for sharing her ideas and code!