👈 Back

Aspect Ratio

It might sometimes be useful to display images of different aspect ratios on screens with a similar aspect ratio.

For example on larger screens that are normally wider than they are tall landscape images usually work best. However, on smaller screens that are taller than they are wide portrait images might be more suitable.

This is example uses media (max-width: ---px) which feels a bit "desktop first" but if you use min-width I found it's harder to control the aspect ratio

The src for this example can be found here


Aspect Ratio

Photos by Mylon Ollila and Sian Cooper