Aspect Ratio Calculator
Calculate CSS aspect ratios and percentages. Generate modern 'aspect-ratio' code or fallback 'padding-hack' styles.
16:9 56.25%
Dimensions
Presets
Generate Code
/* Aspect Ratio 16:9 */
.aspect-box {
width: 100%;
aspect-ratio: 16 / 9;
}Features
- Calculate aspect ratio percentages
- Generate modern `aspect-ratio` syntax
- Generate "Padding Hack" fallback code
- Visual resize handle
- Common presets (16:9, 4:3, 1:1, 21:9)
- Preview with images
Common Use Cases
- Prevent Layout Shifts (CLS) for images
- Create responsive video embeds
- Square profile pictures
- Cinematic web headers
- Responsive product cards
CSS Aspect Ratio
The aspect ratio of an element is the relationship between its width and height. Maintaining aspect ratio is critical for responsive media to prevent jank (layout shifts) while images load.
Modern Syntax: aspect-ratio: 16 / 9; - Supported in all modern browsers.
The "Padding Hack" (Legacy):
Before the new property, we used vertical padding percentages based on width.
Formula: (Height / Width) * 100%.
Ex: 9/16 = 56.25% padding-top.
Examples
Valid - Modern Video
width: 100%;
aspect-ratio: 16 / 9; Valid - Square Avatar
width: 50px;
aspect-ratio: 1 / 1;
border-radius: 50%;
object-fit: cover; Valid - Padding Hack
.container { width: 100%; padding-top: 56.25%; position: relative; }Frequently Asked Questions
What happens if content overflows?
By default, `aspect-ratio` sets a preferred size, but content can expand the element if it's too tall (unless you set `overflow: hidden` or `min-height`).
How do I fit an image inside?
Combine `aspect-ratio` with `object-fit: cover;` to ensure the image fills the box without stretching/distorting.
Calculating Padding Hack?
Divide Height by Width and multiply by 100. For 4:3 -> 3 / 4 = 0.75 = 75%.
💡 Tips
- Always set width/height or aspect-ratio on `<img>` tags to improve Core Web Vitals (CLS score).
- Use `object-fit: cover` for images and `object-fit: contain` for full logos/icons.