What is an aspect ratio?
An aspect ratio expresses the relationship between width and height.
Examples:
16:9– widescreen video and modern displays4:3– older monitors and photography1:1– square images and social media9:16– vertical video and mobile screens
Aspect ratios are written as width:height.
Common aspect ratios
| Aspect ratio | Usage |
|---|---|
| 16:9 | Video, TV, desktop screens |
| 4:3 | Photography, legacy screens |
| 1:1 | Social media, thumbnails |
| 3:2 | DSLR photography |
| 21:9 | Ultrawide monitors |
| 9:16 | Mobile video, stories |
When to use aspect ratios
- Maintain consistent image and video proportions
- Design responsive layouts that scale correctly
- Prepare assets for multiple screen sizes
- Prevent distortion when resizing media
Aspect ratios are especially important in responsive design and content management systems.
Example calculations
1920 × 1080 → 16:9
1080 × 1080 → 1:1
390 × 844 → 19.5:9How to calculate an aspect ratio
Divide width and height by their greatest common divisor (GCD).
1920 / 120 = 16
1080 / 120 = 9
→ 16:9Aspect ratio vs screen resolution
Aspect ratio describes proportion, not absolute size.
- 1920×1080 and 1280×720 share the same ratio (16:9)
- Resolution defines pixel count
- Aspect ratio defines shape
Aspect ratios in responsive design
Aspect ratios help preserve layout integrity when screens resize.
Common CSS usage:
.video {
aspect-ratio: 16 / 9;
}The aspect-ratio property ensures consistent proportions without fixed heights.
How this Aspect Ratio Calculator works
An aspect ratio describes the proportional relationship between width and height.
This calculator allows you to:
- Convert width and height into an aspect ratio
- Calculate missing dimensions while preserving proportions
- Reduce ratios to their simplest form
- Preview common screen and media formats