Things That Can Break aspect-ratio in CSS – Frontend Masters Boost
CSS has an aspect-ratio property, which has had full support since around 2021. It can be a very satisfying property to use, because it can help match how your brain 🧠 works or what the desired design outcome does better than forcing dimensions does. “I need a square here” or “I need to match the 16:9 size of a
<video>” are very reasonable design needs. Especially in a fluid environment where you’re purposely trying not to think in exact dimensions because you know they can change.
Source: Things That Can Break aspect-ratio in CSS – Frontend Masters Boost
Once upon a time dealing with CSS gotchas was largely about dealing with browser inconsistencies and bugs. Now, many new CSS features are are sufficiently complex as to cause challenges with standard behaviour that may not be intuitive.
This article on one of my favourite, seemingly simple CSS features, aspect-ratio, has some subtleties you may not have considered as Chris Coyier at Front End Masters outline here.
