Definition and Usage

The object-fit property specifies how the content of a replaced element, such as an image or video, is fitted within the element's content box based on its specified width and height.

This property lets you control how images and videos are resized to fit an element’s dimensions, preserving their natural appearance without distortion.

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 (object) of a replaced element, such as an image or video, is fitted within the specified content-box, based on its height and width. It is primarily used with <img> and <video> elements.

Formal definition of the object-fit property
Initial value fill
Applies to replaced elements
Inherited no
Percentages n/a
Computed value specified keyword
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;
}
Rendered Output
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;
}
Rendered Output

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;
}
Rendered Output
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;
}
Rendered Output

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;
}
Rendered Output
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;
}
Rendered Output

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;
}
Rendered Output
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;
}
Rendered Output

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;
}
Rendered Output
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;
}
Rendered Output

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