Aspect‑Ratio vs Padding‑Top Hack: Which Approach Yields Better Performance for Responsive Image Containers?

Goal

Maintain a responsive image container that preserves a 16:9 aspect ratio across all target browsers.

Constraints & Uncertainty

Modern browsers support aspect-ratio, eliminating the need for pseudo‑elements or JavaScript. However, legacy browsers (IE, legacy Edge) lack this feature, necessitating a fallback. The padding‑top hack, while widely supported, introduces layout shift and requires an empty wrapper element, increasing markup complexity.

Unresolved Decision

Should the fallback strategy prioritize performance by preserving the declarative aspect-ratio syntax and using @supports to inject a padding‑top rule, or should the fallback favor simplicity by always rendering the padding‑top wrapper and accepting the extra markup?

Specific Questions

• What is the measurable impact on reflow cycles when switching between aspect-ratio and the padding‑top hack during window resize?
• Does the padding‑top wrapper introduce significant layout shift or accessibility concerns compared to a pure aspect-ratio implementation?
• Which fallback strategy yields the most maintainable codebase while still delivering acceptable performance on legacy browsers?