How to css aspect-ratio property: browser support and fallbacks
- Step 1Use aspect-ratio for modern browsers — Apply aspect-ratio: 16 / 9 (or whatever ratio your SVG uses) to the container. The browser computes height automatically based on the container's width. No explicit height needed.
- Step 2Add the padding-bottom fallback — For browsers without aspect-ratio support: wrap the SVG in a div with position: relative and padding-bottom: X% (where X = height/width * 100). The SVG is absolutely positioned inside with top: 0; left: 0; width: 100%; height: 100%.
- Step 3Use @supports to gate the approaches — @supports (aspect-ratio: 1) { .svg-wrapper { aspect-ratio: 16/9 } } combined with the padding-bottom baseline ensures both approaches are never applied simultaneously.
Frequently asked questions
Does an SVG img element automatically maintain its aspect ratio?+
Yes, if the SVG has a viewBox attribute. The browser derives the intrinsic aspect ratio from the viewBox and applies it when you set width: 100% and height: auto on the img element. No CSS aspect-ratio needed — the browser handles it natively.
Why is aspect-ratio ignored on my flex item?+
In some older Chrome and Safari versions, aspect-ratio on flex items is ignored when the flex container stretches the item along the cross axis. Fix it by setting align-self: flex-start on the item, or wrapping the item in a non-flex div with the aspect-ratio applied.
How do I compute the padding-bottom percentage for an arbitrary aspect ratio?+
Formula: padding-bottom = (height / width) * 100%. For 16:9: (9/16) * 100 = 56.25%. For a 400×300 SVG: (300/400) * 100 = 75%. For a square (1:1): 100%. The JAD Responsive Wrapper tool computes this automatically from the SVG's viewBox.
Does CSS aspect-ratio interact with min-height and max-height?+
Yes. min-height and max-height take precedence over the computed height from aspect-ratio. If your container has a max-height constraint, the aspect ratio may be broken at narrow widths where the computed height exceeds max-height. Use max-width instead of max-height to constrain responsive SVG containers.
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.