CSS Aspect Ratio Calculator & Responsive Padding Hack Converter
Compute modern aspect-ratio and legacy padding-top percentage hacks with real-time responsive preview box
A handy tool to preserve consistent width-to-height aspect ratios for images, video players, and iframe containers using modern CSS rules or legacy percentage hacks.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Type the pixel dimensions (Width/Height) or select standard resolution presets (16:9, 4:3, etc.).
- Observe the simplified integer ratio and the computed padding-top percentage equivalent.
- Use the width range slider to visually verify responsiveness, and copy the desired CSS rules.
FAQ
- What is the padding-top aspect ratio hack?
- It leverages the CSS specification that percentage padding is calculated based on the parent width. Combining zero height with padding-top establishes a responsive layout ratio.
- Does aspect-ratio work in Internet Explorer?
- No. IE 11 and older do not support CSS aspect-ratio. For maximum compatibility with old browsers, the padding-top hack must be used.