Upload your own photo, compare every object-fit value live, fine-tune object-position, and copy the finished CSS.
See exactly how fill, contain, cover, none and scale-down behave on your own photo before you ship the CSS.
Upload any photo from your device to test object-fit against real content, not a generic placeholder.
Click a corner, edge or center point, or fine-tune with x/y percent sliders for pixel-level control.
Grab the finished object-fit and object-position declarations, ready to paste onto your img element.
By default, a replaced element like <img> or <video> stretches to exactly fill whatever width and height you give it, distorting the content if the box's aspect ratio doesn't match the media's natural aspect ratio. object-fit changes that behavior the same way background-size does for CSS background images. fill keeps the default stretching behavior, contain scales the media down so the whole thing fits inside the box without cropping, potentially leaving empty space, and cover scales the media up so it completely fills the box, cropping whatever doesn't fit. none ignores the box entirely and renders the media at its natural size, cropping any overflow, while scale-down picks whichever of none or contain results in a smaller rendered size, which is useful for never upscaling a small image. object-position then controls which part of the media is anchored within the box, exactly like background-position, which matters most for cover and none where content actually gets cropped.
object-fit only has an effect when the element has an explicit width, height or aspect-ratio.
Use scale-down for user-uploaded thumbnails of unpredictable size to avoid blurry enlargement.
Set object-position toward a face or focal point so cover-mode cropping never cuts off what matters.
object-fit controls how an image or video is resized to fit its box when the element's aspect ratio does not match the content's natural aspect ratio, similar to how background-size works for background images.
cover scales the image up to fill the entire box, cropping any overflow, so there is never empty space but some of the image may be cut off. contain scales the image down to fit entirely inside the box, which can leave empty space on two sides but never crops anything.
object-position sets which part of the image is anchored within its box when the image is cropped or has extra space, similar to background-position. It accepts keywords like center or percentages for both axes.
none ignores the box size entirely and shows the image at its natural size, cropping anything that overflows. scale-down behaves like none if the image is smaller than the box, or like contain if the image is larger, so it never scales an image up.
Yes. object-fit and object-position are applied directly to the img or video element itself, not to a wrapping container, and the element still needs an explicit width and height (or aspect-ratio) for the effect to be visible.
Keep building with these free online CSS tools.