How to css aspect-ratio property: browser support and fallbacks
- Step 1Rely on aspect-ratio for modern browsers — Apply
aspect-ratio:<w>/<h>andwidth:100%to the container — the wrapper does this for you using the viewBox numbers. The browser computes height; no explicit height is needed. - Step 2Confirm the viewBox is readable — The wrapper only derives the ratio from a double-quoted, space-separated, positive-number viewBox. If yours uses commas, negatives, or single quotes, normalise it first or you will get the 1/1 square fallback.
- Step 3Avoid height overrides — Do not put min-height or max-height on the aspect-ratio container — they take precedence and break the shape. Constrain size with max-width (the wrapper's Max width) instead.
- Step 4Add a legacy fallback only if required — For pre-2021 Safari, wrap with the padding-bottom pattern: a relative parent with
padding-bottom:(h/w*100)%and an absolutely positioned child. The wrapper does not emit this; add it by hand. - Step 5Gate the two approaches with @supports — If you must combine them, set the padding-bottom baseline, then override inside
@supports (aspect-ratio:1){ }so the modern and legacy approaches never both apply. - Step 6Verify the rendered ratio — Check the wrapper's reported Aspect ratio metric (h/w x 100). For 16:9 you should see 56.25%; for a square, 100.00%. A surprise 100% on non-square art means the viewBox was not read.
aspect-ratio browser support (relevant to wrappers)
Support landed in 2021 across the major engines; the wrapper targets these and ships no fallback.
| Browser | Supported from | Notes |
|---|---|---|
| Chrome / Edge | 88 (Jan 2021) | Stable; the wrapper relies on this |
| Firefox | 89 (Jun 2021) | Stable |
| Safari (desktop/iOS) | 15 (Sep 2021) | Pre-15 needs the padding-bottom fallback |
| Global support | ~95%+ (2026) | Why the wrapper omits a fallback |
viewBox to aspect-ratio mapping and fallback boundary
What the wrapper writes for each viewBox form — and where it falls back to a square.
| viewBox form | Read? | aspect-ratio emitted |
|---|---|---|
| "0 0 16 9" (space, double quote) | Yes | 16/9 (56.25%) |
| "0,0,16,9" (commas) | No | 1/1 (square fallback) |
| "-10 -10 120 60" (negative) | No | 1/1 (square fallback) |
| '0 0 16 9' (single quotes) | No | 1/1 (square fallback) |
| no viewBox at all | No | 1/1 (square fallback) |
Cookbook
These patterns show the wrapper's modern output, the legacy fallback you add by hand, and how to compute the numbers yourself for verification.
What the wrapper emits (modern)
aspect-ratio on the inner div; the browser computes height. No fallback, no script.
<div style="max-width:100%;width:100%">
<div style="aspect-ratio:16/9;width:100%">
<svg viewBox="0 0 16 9" width="100%" height="100%">...</svg>
</div>
</div>Legacy padding-bottom fallback (manual)
For pre-2021 Safari. The wrapper does not generate this; write it yourself.
.ratio { position: relative; width: 100%; padding-bottom: 56.25%; } /* 9/16 */
.ratio > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
<div class="ratio">
<svg viewBox="0 0 16 9" width="100%" height="100%">...</svg>
</div>Gating both with @supports
Baseline padding-bottom, overridden by aspect-ratio where supported, so they never both apply.
.ratio { position: relative; padding-bottom: 56.25%; }
.ratio > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@supports (aspect-ratio: 1) {
.ratio { padding-bottom: 0; aspect-ratio: 16 / 9; }
.ratio > svg { position: static; }
}Computing the padding-bottom percentage
Formula and worked examples. The wrapper reports this same number as its Aspect ratio metric.
padding-bottom = (height / width) * 100% 16:9 -> (9 / 16) * 100 = 56.25% 400x300 -> (300/400) * 100 = 75.00% 1:1 -> (1 / 1) * 100 = 100.00% (also the no-viewBox fallback)
Avoiding the max-height trap
max-height overrides the aspect-ratio height and squashes the box. Use max-width to constrain instead.
/* BAD: breaks the ratio at narrow widths */
.box { aspect-ratio: 16/9; width: 100%; max-height: 200px; }
/* GOOD: caps width, ratio always holds */
.box { aspect-ratio: 16/9; width: 100%; max-width: 600px; }Edge cases and what actually happens
Pre-2021 Safari (no aspect-ratio)
Needs manual fallbackThe wrapper emits no padding-bottom fallback. On Safari 14 and older the aspect box is ignored. Add the padding-bottom pattern by hand if you must support those versions.
Comma-separated viewBox
Square fallbackThe detector matches space-separated numbers only, so 0,0,16,9 is not read and the wrapper emits aspect-ratio:1/1. Normalise separators (svg-pro-minifier) before wrapping.
Negative viewBox offset
Square fallbackThe pattern accepts digits and dots only, so -10 -10 120 60 does not match and falls back to 1/1. Re-fit the viewBox (svg-viewbox-fixer) to remove the offset, then wrap.
Single-quoted viewBox
Square fallbackOnly double-quoted viewBox attributes are detected. Convert '…' to "…" (a minify pass normalises quoting) so the real ratio is read.
min-height/max-height on the box
Ratio overriddenThese properties take precedence over the height computed from aspect-ratio, breaking the shape. Constrain with max-width instead — that is what the wrapper's Max width is for.
aspect-ratio ignored on a flex item
Known quirkSome older Chrome/Safari builds ignore aspect-ratio on a stretched flex item. Set align-self:flex-start, or wrap the box in a non-flex div. This is a CSS quirk, not a wrapper bug.
img SVG already has an intrinsic ratio
Redundant boxAn img loading a viewBox-bearing SVG already keeps its ratio with width:100%;height:auto, so an extra aspect-ratio box is unnecessary. The wrapper's box is for inline SVG, where you control sizing explicitly.
Surprise 100% aspect on non-square art
viewBox not readIf the reported Aspect ratio is 100% but your art is not square, the viewBox was not parsed (comma/negative/quote/none). Fix the viewBox form and re-wrap.
Frequently asked questions
Does the wrapper output use aspect-ratio or padding-bottom?
Only the CSS aspect-ratio property. The inner div gets aspect-ratio:<w>/<h>;width:100%. There is no padding-bottom in the generated markup — add that yourself only for pre-2021 Safari.
When is aspect-ratio supported?
Chrome/Edge 88+ (Jan 2021), Firefox 89+ (Jun 2021), Safari 15+ (Sep 2021). Global support is around 95%+ in 2026, which is why the wrapper ships no fallback by default.
Where does the wrapper get the ratio?
From the third and fourth viewBox numbers, written verbatim as aspect-ratio:<w>/<h>. The reported Aspect ratio metric is height ÷ width × 100.
What if the viewBox uses commas or negative offsets?
It will not be detected — the regex matches double-quoted, space-separated, positive numbers only — and the wrapper falls back to aspect-ratio:1/1. Normalise with svg-pro-minifier or re-fit with svg-viewbox-fixer first.
Does an img SVG need the aspect-ratio box at all?
No. An img loading a viewBox-bearing SVG already keeps its intrinsic ratio with width:100%;height:auto. The aspect-ratio box is for inline SVG, which is what the wrapper produces; for an external/cacheable asset, generate a data-URI with svg-css-data-uri instead.
How do I compute the padding-bottom percentage?
padding-bottom = (height / width) × 100%. For 16:9 that is 56.25%; for 400×300, 75%; for a square, 100%. It equals the wrapper's reported Aspect ratio metric.
Why is aspect-ratio ignored on my flex item?
Older Chrome/Safari can ignore aspect-ratio on a flex item stretched along the cross axis. Set align-self:flex-start on the item or wrap it in a non-flex div. This is a browser quirk independent of the wrapper.
Do min-height and max-height affect the aspect box?
Yes — both override the height computed from aspect-ratio and can distort the shape. Constrain a responsive SVG container with max-width (the wrapper's Max width), not max-height.
How do I add a fallback for old Safari?
Wrap the SVG with the padding-bottom pattern (relative parent, padding-bottom:(h/w*100)%, absolutely positioned child) and override it inside @supports (aspect-ratio:1). The wrapper does not emit this; you add it manually.
What does a square aspect-ratio in the output mean?
Either your art is genuinely square, or the viewBox could not be read and the wrapper used its 1/1 fallback. If non-square art shows 100%, fix the viewBox form and re-wrap.
Does the wrapper set preserveAspectRatio on the SVG?
No. It does not add or change preserveAspectRatio; the SVG keeps its existing behaviour (default xMidYMid meet). The aspect box is enforced by the outer CSS, not by altering the SVG's preserveAspectRatio.
Can I rely on aspect-ratio for production today?
Yes. With ~95%+ global support since 2021, the single aspect-ratio pattern is production-safe. Only add the legacy fallback if your analytics still show meaningful pre-2021 Safari traffic.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.