Aspect ratio is the proportion between the width and height of an image, video or display, written as two numbers separated by a colon. It describes shape, not size: a 16:9 screen is 16 units wide for every 9 units tall, whatever the diagonal.
Why it matters
When content and screen have different aspect ratios, something must give: black bars (letterboxing or pillarboxing), cropping or stretching. Common ratios are 16:9 for TVs, most monitors and online video; 21:9 for ultrawide monitors and some films; 4:3 for older video and some tablets; and 9:16 for vertical phone video. In web design, the CSS aspect-ratio property reserves the right space before media loads.
Example
To compute the ratio, divide width by height and reduce:
1920 / 1080 = 1.777... -> 16:9
2560 / 1080 = 2.370... -> about 21:9In CSS:
.video { aspect-ratio: 16 / 9; width: 100%; }Common mistakes
- Stretching a 4:3 image to fill a 16:9 screen, which distorts shapes.
- Confusing aspect ratio with screen resolution; two screens can share a ratio at different pixel counts.
- Forgetting to reserve space for images, which causes layout shifts while a page loads.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.