🎯 CSS object-fit Property

The object-fit CSS property defines how an image or video should fit inside its container. It controls whether the media is stretched, cropped, or scaled to match the box dimensions.

In simple terms, object-fit answers the question: “How should this image behave inside its container?”

img {
    object-fit: cover;
}
                

The image stretches to fill the entire container. This may cause distortion.

img {
    object-fit: fill;
}
                

The image covers the container completely while maintaining aspect ratio. Overflow is cropped.

img {
    object-fit: cover;
}
                

The entire image is visible, but empty space may appear inside the container.

img {
    object-fit: contain;
}
                

The image keeps its original size and is not resized.

img {
    object-fit: none;
}
                

Automatically chooses between contain and none depending on which fits better.

img {
    object-fit: scale-down;
}
                

Resets the property to its default value, which is fill.

img {
    object-fit: initial;
}