Boxes that keep their proportions
CaveatAn explicit height beats aspect-ratio every time. The one that catches people is implicit: a flex or grid parent stretches its children by default, and that stretch is a height.
FallbackSet align-items: start on the parent, or height: auto on the child. Then the ratio has room to do its job.
.tile { aspect-ratio: 16 / 9; width: 96px; }
/* or the parent stretch overrides it */
.row { align-items: start; }Published
Questions
Why does aspect-ratio do nothing inside a flex row?
A flex parent stretches its children by default, and that stretch is a height — an explicit height beats aspect-ratio every time. Set align-items: start on the parent, or height: auto on the child.
Does an explicit height override aspect-ratio?
Yes, and so does anything that resolves to one: a stretched flex or grid item, a height: 100% inherited from a parent, a min-height taller than the ratio would give. The ratio only fills in a dimension nothing else has decided.
Should I still use the padding-top percentage trick?
No. aspect-ratio is supported everywhere that matters now, it needs no wrapper and no absolutely positioned child, and it works on any box rather than only on ones you can afford to make position: relative.