Aspect Ratio & object-fit Preview
See how an image fits a box of a different aspect ratio with object-fit (fill, contain, cover, none, scale-down) and object-position: size, crop, CSS.
A live preview, the drawn size and offset, the scale, the share of the image cropped and of the box left empty, both reduced aspect ratios and a CSS snippet.
Example: A 1600 × 900 (16:9) image in a 300 × 200 (3:2) box: cover draws 355.6 × 200 and crops 15.6 % (27.8 px a side); contain draws 300 × 168.8 and leaves 15.6 % of the box empty.
The concrete
object size.
The CSS rules behind each object-fit value, how position works, and what the numbers mean.
The five values
CSS Images Level 3 defines the concrete object size: fill stretches the image to the box, ignoring its ratio; contain scales it by the smaller of box-width ÷ image-width and box-height ÷ image-height so it all fits; cover scales by the larger so it fills the box; none keeps the natural size; scale-down uses contain or none, whichever is smaller. The drawn size, scale and offset follow directly.
Position
object-position places the drawn image in the box. A percentage is relative to the free space (box minus object) in that axis: 50 % centres, 0 % aligns the left or top edges, 100 % the right or bottom, and values outside 0–100 push the image further. The preview draws the whole image, ghosting the part that falls outside the box.
Crop and letterbox
“Image visible” is the share of the drawn image inside the box — the rest is cropped, listed per edge in pixels; “box covered” is the share of the box the image fills — the rest shows the element’s background. Ratios are reduced by the greatest common divisor when the sizes are whole numbers. object-fit only applies to replaced elements with a set size; it never changes layout. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.
SOURCES
- CSS Images Module Level 3, object-fit and object-position: concrete object size rules for fill, contain, cover, none and scale-down; percentage position relative to the free space
Last reviewed 21 September 2026. How results are checked: How we verify.