Letterboxing versus cropping
When an image and its frame are different shapes you have two honest options: add bars and keep the whole image, or crop and lose the edges. Stretching is the third option and it is always wrong.
At a glance
- Letterbox
- Bars above and below; the whole image is kept
- Pillarbox
- Bars left and right; the whole image is kept
- Crop
- No bars; the edges of the image are discarded
- Stretch
- No bars and nothing lost, but every shape is distorted
- CSS equivalent
- object-fit: contain letterboxes, object-fit: cover crops
- Controlling the crop
- object-position moves which part of the image survives
In detail
Fitting a picture of one shape into a frame of another is a choice between losing area around the picture and losing area from the picture. Letterboxing and pillarboxing keep every pixel and pay for it with empty bands; cropping fills the frame and pays for it by discarding the edges. There is no third option that costs nothing, which is why stretching keeps getting used and why it always looks wrong.
Stretching is worth naming precisely because it is so tempting. It fills the frame, loses nothing and takes no decision, and it distorts every proportion in the image. Faces are where it shows first: a seven percent horizontal stretch is imperceptible on a landscape and immediately obvious on a portrait.
In CSS the choice is the object-fit property. The value contain letterboxes or pillarboxes as needed, keeping the whole image inside the box; cover crops, filling the box and overflowing the rest; fill is the stretch, and it is the default for a replaced element with both dimensions set. Reaching for cover without thinking is how a headline ends up cropped out of a card image.
When you do crop, object-position decides which part survives. The default is the centre, which is right for a symmetrical composition and wrong for most photographs of people, where the subject is usually off centre. Setting a position per image, or providing a separate crop for narrow viewports, is what art direction means in practice.
Examples
.contain { object-fit: contain; } /* bars, nothing lost */
.cover { object-fit: cover; } /* fills, edges lost */
.fill { object-fit: fill; } /* fills, distorted: avoid */.hero img {
aspect-ratio: 21 / 9;
width: 100%;
object-fit: cover;
object-position: 50% 30%; /* favour the upper middle, where faces sit */
}source 16:9 at 1920 wide -> 1920 x 1080
target 1:1 at 1080 tall -> 1080 x 1080
discarded -> 840 pixels of width, 44 percent of the frameThings that catch people out
- object-fit: fill is the default for an image with both dimensions set. If a picture looks subtly wrong, check for it first.
- Cover with the default centre position crops symmetrically, which is rarely where the subject is.
- Bars baked into an exported file cannot be removed later. Export at the picture's own ratio and let the player or the layout add the bars.
Try it: Aspect Ratio Calculator
Enter a width and a height, or a ratio and one dimension, and it solves the missing one, simplifies the ratio, counts the megapixels and gives you a copyable CSS value.
Aspect Ratio Calculator
LOCAL · Browser-OnlyCalculate and convert aspect ratios for images, videos, and screens
1920 x 1080px · 16:9 · 1.7778:1
Common Aspect Ratios Reference
| Ratio | Decimal | Common Use |
|---|---|---|
| 16:9 | 1.778 | Widescreen TV, YouTube, monitors |
| 4:3 | 1.333 | Classic TV, iPad, presentations |
| 1:1 | 1.000 | Instagram square, profile pictures |
| 21:9 | 2.333 | Ultrawide monitors, cinema |
| 9:16 | 0.563 | Phone vertical, TikTok, Reels |
| 3:2 | 1.500 | 35mm photography, MacBook |
| 2:3 | 0.667 | Portrait photography, posters |
| 5:4 | 1.250 | Large format photography, older monitors |
| 32:9 | 3.556 | Super ultrawide monitors |
| 2.39:1 | 2.390 | Anamorphic cinema, widescreen films |
Related Image and canvas sizes
All image and canvas sizes →What is an aspect ratio?
Aspect ratio is width divided by height, and it says nothing about resolution or file size. How to simplify one, read it as a decimal, and use it correctly.
The CSS aspect-ratio property
How the aspect-ratio property works, what happens when a width and a height are also set, and how it removes layout shift when media loads.
2.39:1 aspect ratio
The widescreen cinema ratio at 2.39, why it used to be 2.35, how anamorphic lenses produced it, and what it means for a video framed this way.
DPI versus pixel dimensions
Why a raster file only stores pixels, what the DPI number in its metadata does and does not change, and how to work out a print size from a pixel count.
YouTube 1080p video size: 1920 by 1080
Why 1920 by 1080 is the standard full HD upload frame, what the player overlays cover, and how the thumbnail is a separate asset at the same shape.
YouTube 4K video size: 3840 by 2160
The 4K UHD frame at 3840 by 2160, why it is exactly four times the pixel count of 1080p, and what uploading above the watched resolution actually buys you.
Tools for this
- Image Cropper Free online image cropper - crop images with preset aspect ratios and free-form selection
- Aspect Ratio Calculator Free online aspect ratio calculator - calculate and convert aspect ratios for images, videos, and screens