fill stretches the image to the box and can change its proportions.
Local CSS object-fit generator
Compare CSS object-fit modes with live preview
Set the box, choose a fit mode, tune the focal position, and copy object-fit CSS for your image.
* Everything runs in your browser. No images are uploaded.
CSS ready
object-fit: cover; object-position: 50% 50%;
QUICK GUIDE
Fit controls the crop
contain shows the whole image and may leave empty space inside the box.
cover fills the box while cropping the image around object-position.
none and scale-down preserve more of the source size when the box allows it.
FAQ
Object fit questions
What does object-fit apply to?
It controls how a replaced element such as an img or video fits inside its box.
What is object-position?
It chooses the alignment point used when the object does not match the box shape.
Why is the sample an inline SVG?
A built-in sample keeps the preview private and makes crop changes obvious without uploading your image.