Aspect Ratio
The width-to-height ratio of images or video. Essential for maintaining shape during resize and crop.
Aspect ratio is the width-to-height proportion of an image or video. Expressed as "width:height", it defines shape as a fundamental parameter across capture, editing, and display. Same ratio means identical shape regardless of resolution.
Common aspect ratios:
- 1:1: Square. Social media profiles, Instagram posts, icons
- 4:3: Traditional TV, iPad, compact cameras
- 3:2: 35mm film and DSLR standard. Matches 4x6 inch prints
- 16:9: Widescreen standard for TVs, monitors, YouTube
- 21:9: Ultra-wide monitors, cinematic CinemaScope
- 9:16: Smartphone vertical for TikTok, Reels, Shorts
Maintaining ratio during resize is critical - ignoring it causes distortion. Most editors provide "lock aspect ratio." When cropping, specifying target ratio ensures precise composition.
In CSS, aspect-ratio declaratively sets element proportions. Setting ratios on containers reserves layout space before loading, preventing CLS and improving Core Web Vitals.