aspect-ratio

Lock an element to a width/height ratio.

status: stable js: none support: baseline

Preview

<div class="aspect-ratio"><img src="…" alt="…"></div>

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/aspect-ratio.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add aspect-ratio

Decorative wrapper; alt text on media

.aspect-ratio .aspect-square .aspect-video .aspect-photo .aspect-portrait .aspect-cinema .aspect-wide .aspect-ultra

base/tokens