CSS object-fit Property
Description
The object-fit
property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.
- Initial value
- fill
- Applies to
- Replaced elements
- Inherited
- No
- Media
- Visual
- Computed value
- Specified value
- Animatable
- No
- CSS Version
- CSS3
- JavaScript syntax
- object.style.objectFit
Syntax
object-fit: fill | contain | cover | none | scale-down
Values
- fillThe replaced content is sized to fill the element's content box: the object's concrete object size is the element's used width and height.
- containThe replaced content is sized to maintain its aspect ratio while fitting within the element's content box: its concrete object size is resolved as a contain constraint against the element's used width and height.
- coverThe replaced content is sized to maintain its aspect ratio while filling the element's entire content box: its concrete object size is resolved as a cover constraint against the element's used width and height.
- noneThe replaced content is not resized to fit inside the element's content box: determine the object's concrete object size using the default sizing algorithm with no specified size, and a default object size equal to the replaced element's used width and height.
- scale-downSize the content as if 'none' or 'contain' were specified, whichever would result in a smaller concrete object size.
Example
<p class="test"><img src="images/tech.gif" alt=""></p>
.test img {
object-fit: cover;
height: 125px;
width: 100%;
}
Browser Support
Desktop | |||||
X | 79 | 32 | 36 | 19 | 10 |
Tablets / Mobile | |||||
![]() |
|||||
4.4.3 | 32 | 36 | 19 | 10 | 2.0 |
Last updated by CSSPortal on: 3rd November 2019