TILs, snippets—my digital code garden 🌱. By Zander Martineau
All tags All notes javascript (47) css (33) react (32) html (13) typescript (9) testing (8) node (4) cli (4) graphql (4) devops (4) git (4) cheatsheet (4) storybook (2) typography (2) networking (1) animation (1) services (1) api (1) a11y (1) deno (1) cypress (1) vscode (1) 11ty (1) untagged (15)
© 2023 • Made by Zander • Colophon • RSS

Aspect ratio

Link https://www.bram.us/2020/11/30/native-aspect-ratio-boxes-in-css-thanks-to-aspect-ratio
Note date 29 Dec, 2020
Tags css
👋 FYI, this note is over 6 months old. Some of the content may be out of date.
/* Old, hacky way */
.parent {
padding-top: 56.25%;
}

/* New, cool way */
.parent {
aspect-ratio: 16 / 9;

/* or for square things */
aspect-ratio: 1 / 1;
}

← Back home