Dynamic Aspect Ratio
Media area that picks its format from the width available — square, 4:3, 16:9 then 21:9 — with a badge showing the format actually applied.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Utilities has 43 effects, including 3 free. Explore the category →
3 usage examples
How it works
.fx-0764-root is a transparent container (container: dar-media / inline-size) taking the full width. The .dar-media area has 10 px corners, a centred label and a cyan-blue-violet gradient twice its size, whose position slides in a 6 s loop (@keyframes dar-shift). Its height comes only from aspect-ratio, which starts at 1 / 1.
Three @container dar-media steps change the format: 4 / 3 from 300 px, 16 / 9 from 450 px, 21 / 9 from 600 px. The label grows at the same time (0.85 to 1.4 rem). The format change is animated over 0.5 s: measured, the area eases from the square height to the 16:9 height in all three engines tested.
The .dar-badge is empty in the HTML; its text comes from ::before, redefined in every step (content: "16:9"…). So it is always right, whatever makes the width change, and with no script. For real media, set your image or video as the .dar-media background, or put an <img> / <video> inside with object-fit: cover.
Accessibility
- Badge is read: text generated by
::beforeis part of the name read by recent screen readers (“16:9”). If it means nothing to your audience, addaria-hidden="true"to the badge. - Reduced motion: under
prefers-reduced-motion: reduce, the gradient stops sliding (it stays, still) and format and label changes happen without transition. - Contrast: shadowed white label on the default gradient: at least 4.6:1 on all three colours, measured in Chromium, Firefox and WebKit at several points of the animation; white badge on a 45 % black veil. With a light photo behind, darken it or strengthen the badge veil.
- Media to describe: the area is a
div; if you put a meaningful picture in it, use an<img alt="…">rather than a CSS background.
Browser compatibility
Container queries, aspect-ratio (Chrome 88, Firefox 89, Safari 15) and a CSS animation. Measured in Chromium 151, Firefox 153 and WebKit 26.5: 1:1 up to 260 px, 4:3 from 300 to 430, 16:9 at 520, 21:9 at 620 and 800 px, badge matching the displayed format every time.
Without @container the area stays square and the badge reads “1:1”, which is still accurate.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0764-root">
<div class="dar-media">
<span class="dar-label">Dynamic Ratio</span>
<span class="dar-badge"></span>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Steps and formats (CSS — @container dar-media (min-width: …) and aspect-ratio) |
1:1, 4:3 from 300, 16:9 from 450, 21:9 from 600 px | Change each aspect-ratio and the badge content in the same rule so they stay in step (e.g. 3:2 instead of 4:3). |
Visual (CSS or HTML — .dar-media) |
#048096 → #1b6df5 → #8453f5 gradient, animated |
For a photo, replace the background with url(…) center / cover and remove animation. |
Gradient speed (CSS — animation: dar-shift 6s) |
6 s, looping | 12 s for barely visible motion, none for a still background. |
Badge (HTML/CSS — .dar-badge) |
Visible, top right | Delete the tag for media with no hint, or move it with top/left. |
Label (HTML — .dar-label) |
“Dynamic Ratio” | Put the video title, or remove it for an image on its own. |
Format transition length (CSS — transition: aspect-ratio .5s) |
0.5 s | none if the area sits in a list that resizes often. |
FAQ
<video> inside .dar-media with position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover. The area keeps the computed format and the video is cropped inside it.
