An aspect ratio expresses the relationship between the width and height of a rectangular element. It is written as two numbers separated by a colon, such as 16:9 or 4:3. Maintaining the correct aspect ratio when scaling an image or video prevents distortion. Calculating the right dimensions for responsive design, embedded video iframes, and retina display assets requires understanding aspect ratios.
Common Aspect Ratios
16:9 is the standard widescreen aspect ratio used by modern televisions, monitors, and video production. YouTube, Netflix, and most streaming platforms use 16:9. HD (1920x1080) and 4K (3840x2160) are both 16:9.
4:3 was the standard for older televisions and early computer monitors. It is still used for some presentation formats and classic video content.
1:1 (square) is widely used on social media platforms. Instagram's original feed posts were 1:1.
9:16 (vertical, the inverse of widescreen) is the format for vertical video: TikTok, Instagram Stories, YouTube Shorts, and Snapchat.
3:2 is the native ratio of most DSLR and mirrorless camera sensors, derived from the 35mm film format.
Why Aspect Ratios Matter in Web Development
Responsive images: an image that is 1200 pixels wide on desktop needs to be 600 pixels wide on mobile, but at exactly half the original height to avoid distortion.
Video embeds: an embedded YouTube iframe set to 100% width needs its height calculated from the aspect ratio to maintain the correct proportions.
Thumbnail generation: when creating image thumbnails at a fixed width, the correct height is calculated from the original aspect ratio.
Canvas elements: drawing a scaled-down version of a design requires knowing both target dimensions.
The CSS aspect-ratio Property
Modern CSS has a native aspect-ratio property. Setting aspect-ratio: 16 / 9 on an element with a defined width automatically computes the correct height. This eliminates the need for the old padding-top hack (where you set padding-top to a percentage of the width) that was used for years to maintain aspect ratios in CSS.
Using the DevHexLab Aspect Ratio Calculator
Open the tool at /tools/developer/aspect-ratio-calculator. Enter the original width and height. The tool calculates the simplified ratio and lets you enter a new width or height to get the scaled dimensions. This is the fastest way to answer questions like: if I resize this 2400x1350 image to 800 pixels wide, how tall should it be?
Frequently Asked Questions
How do I calculate the height from the width?
Divide the width by the ratio's width part and multiply by the ratio's height part. For a 16:9 element that is 1920 pixels wide: 1920 / 16 * 9 = 1080.
What aspect ratio should I use for Open Graph images?
The recommended OG image aspect ratio is 1.91:1, which is approximately 1200x630 pixels. This fits well in most social media preview cards.
Calculate once, apply consistently across all your breakpoints.