CSS Aspect Ratio

Creator

Creator

Created

Created

2022 Feb 9 16:19

Editor

Editor

Edited

Edited

2022 Feb 9 16:19

Refs

Refs

aspect-ratio | CSS-Tricks

The CSS property aspect-ratio lets you create boxes that maintain proportional dimensions where the height and width of a box are calculated automatically as a ratio. It's a little math-y, but the idea is that you can divide one value by another on this property and the calculated value ensures a box stays in that proportion.

aspect-ratio | CSS-Tricks

https://css-tricks.com/almanac/properties/a/aspect-ratio/

aspect-ratio | CSS-Tricks

aspect-ratio - CSS: Cascading Style Sheets | MDN

The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions. Replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio.

aspect-ratio - CSS: Cascading Style Sheets | MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

aspect-ratio - CSS: Cascading Style Sheets | MDN

CSS { In Real Life } | Aspect Ratio is Great

Maybe it's just me, but I feel like a lot of the time learning new CSS features doesn't involve just learning a what a single property does, more like getting to grips with a collection of properties and how they work together - even learning a whole specification.

CSS { In Real Life } | Aspect Ratio is Great

https://css-irl.info/aspect-ratio-is-great/

CSS { In Real Life } | Aspect Ratio is Great

Recommendations

/////////