CSS Object Fit Previewer
Preview how object-fit values frame an image inside a fixed box.
See how object-fit frames images
object-fit controls how an image sits inside a fixed box — cover crops to fill, contain fits the whole image, fill stretches it. Getting it wrong distorts or crops your images. This previewer shows each value against a sample so the behavior is obvious.
Seeing cover, contain, and fill side by side makes the choice immediate rather than trial-and-error in the browser. Pick the value that frames your images correctly and copy it, together with object-position if you need to nudge the crop.
Fit, previewed
cover crops to fill the box, contain shows the whole image, and fill distorts it — previewing avoids shipping the wrong one. Runs in your browser.
Frequently asked questions
What is the difference between cover and contain?
cover fills the box and crops whatever does not fit; contain shows the whole image and leaves empty bands. The preview uses a 320 × 180 box so you can see the crop.
What do fill, none, and scale-down do?
fill stretches the image to the box and can distort it, none keeps the natural size and crops, and scale-down uses whichever of none or contain gives the smaller image.
How do I control which part is cropped?
Add object-position, such as object-position: top or 50% 20%, to keep faces or key content in view when using cover.
Related tools
Practical utilities for front-end design and implementation work.