aspect-ratio: stop the height calculations

Lock the proportions

.video { aspect-ratio: 16 / 9; width: 100%; }
.square { aspect-ratio: 1; }
.portrait { aspect-ratio: 3 / 4; }

Set EITHER width OR height; the browser computes the other. No more "padding-bottom: 56.25%" hacks.

When this saves you

• Video / iframe embeds. YouTube needs 16:9. Twitch needs 16:9. Vimeo needs 16:9. aspect-ratio sets it once.
• Image cards where you want consistent height regardless of source-image dimensions:

.card-image {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;     /* crop to fit, don't squish */
}

• Hero blocks with text overlay — the text always has the same proportional vertical space.

With img tags (use the attributes too)

Even when you set CSS aspect-ratio, the <img> tag should have its OWN width + height attributes for CLS prevention (A7 lesson 7). Browser uses the attributes BEFORE the image loads. CSS aspect-ratio is the canonical answer for non-image elements.

Sub-properties

aspect-ratio: auto 16 / 9 — "intrinsic if the element has natural dimensions, else 16:9." Useful for <img> fallback behavior.