Definition and Usage

The object-fit property specifies how content inside replaced elements, such as images or videos, is adjusted to fit the dimensions of their parent container.

Basic Example

CSS Live Demo: object-fit Click the demo button below!

Formal syntax

CSS 
selector {
    object-fit: fill | contain | cover | none | scale-down;
}

Formal definition

The object-fit property specifies how the content of a replaced element—such as an image or video—should be resized to fit its container, based on the container’s width and height. It is commonly applied to elements like <img> and <video>. Using object-fit, you can control how images or videos are fitted within their parent element.

Formal definition of the object-fit property
Initial value fill
Applies to replaced elements
Inherited no
Animatable no

Values

Accepted values for the object-fit property
fill Initial value.
The image or video is stretched to completely fill the container. The aspect ratio is not preserved, so distortion may occur.
contain The content is resized to fit inside the container while maintaining its aspect ratio. It will be fully visible, but may leave empty space on one axis.
cover The content is scaled to fill the entire container while maintaining its aspect ratio. Some parts may be clipped if the aspect ratio does not match the container.
none The content keeps its original size. It is not resized to fit the container.
scale-down The content is scaled down to the smaller result of either none or contain. If the intrinsic size is smaller than the container, it behaves like none. Otherwise, it behaves like contain.

Practical Examples

The following examples demonstrate how different object-fit values affect image and video elements.

object-fit: fill

Initial value.
The image or video is stretched to completely fill the container. The aspect ratio is not preserved, so distortion may occur.

Image Example
HTML 
<div class="container">
    <img src="flower.jpg" alt="flower">
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
Live Example Preview
Video Example
HTML 
<div class="container">
    <video src="flower.webm" autoplay muted playsinline loop></video>
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
Live Example Preview

object-fit: contain

The content is resized to fit inside the container while maintaining its aspect ratio. It will be fully visible, but may leave empty space on one axis.

Image Example
HTML 
<div class="container">
    <img src="flower.jpg" alt="flower">
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
Live Example Preview
Video Example
HTML 
<div class="container">
    <video src="flower.webm" autoplay muted playsinline loop></video>
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
Live Example Preview

object-fit: cover

The content is scaled to fill the entire container while maintaining its aspect ratio. Some parts may be clipped if the aspect ratio does not match the container.

Image Example
HTML 
<div class="container">
    <img src="flower.jpg" alt="flower">
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
Live Example Preview
Video Example
HTML 
<div class="container">
    <video src="flower.webm" autoplay muted playsinline loop></video>
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
Live Example Preview

object-fit: none

The content keeps its original size. It is not resized to fit the container.

Image Example
HTML 
<div class="container">
    <img src="flower.jpg" alt="flower">
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: none;
}
Live Example Preview
Video Example
HTML 
<div class="container">
    <video src="flower.webm" autoplay muted playsinline loop></video>
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: none;
}
Live Example Preview

object-fit: scale-down

The content is scaled down to the smaller result of either none or contain. If the intrinsic size is smaller than the container, it behaves like none. Otherwise, it behaves like contain.

Image Example
HTML 
<div class="container">
    <img src="flower.jpg" alt="flower">
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}
Live Example Preview
Video Example
HTML 
<div class="container">
    <video src="flower.webm" autoplay muted playsinline loop></video>
</div>
CSS 
.container {
    width: 300px;
    height: 100px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}
Live Example Preview

Browser compatibility

Browser compatibility for the object-fit property
Property
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
object-fit 32 79 36 10

Specifications

Specification for the object-fit property
Specification
object-fit CSS Images Module Level 3
#the-object-fit

References

See also