CSS object-fit & object-position Playground
See exactly how each object-fit keyword treats an image whose aspect ratio doesn't match its container — and tune object-position by clicking on a 2D pad. The CSS at the bottom updates live.
Preview
'/><g fill='none' stroke='%23ffffff' stroke-width='2' opacity='0.55'><rect x='10' y='10' width='580' height='280'/><line x1='0' y1='0' x2='600' y2='300'/><line x1='600' y1='0' x2='0' y2='300'/><circle cx='300' cy='150' r='100'/></g><text x='300' y='160' font-family='monospace' font-size='40' fill='%23ffffff' text-anchor='middle' opacity='0.85'>600 × 300</text></svg>)
px
Settings
50% 50%
%
%
Generated CSS
Cheat sheet
fillStretch to fit (default). Aspect ratio is broken.
containFit entirely inside the box (letterbox/pillarbox). Nothing is cropped.
coverFill the box completely; crops whichever edges overflow.
noneUse intrinsic size. Larger than the box → cropped; smaller → centered with empty space.
scale-downLike
none if smaller than the box, else like contain.
object-position moves the image inside its box for any fit mode that doesn't fill the box completely. Percent values are anchored to that overflow/underflow space, so 0% 0% pins the image's top-left to the box's top-left and 100% 100% pins the bottom-right. Same syntax as background-position; you can also use lengths like 10px 20px or keywords (top right). It also applies to <video>, <iframe>, and replaced elements like <svg>.