object-fit
Summary
The object-fit property defines how content of a replaced element (e.g., a video or an image) is made to fit the dimensions of its containing box.
Overview table
- Initial value
fill
- Applies to
- Replaced elements
- Inherited
- No
- Media
- visual
- Computed value
- As specified
- Animatable
- No
- CSS Object Model Property
objectFit
Syntax
object-fit: contain
object-fit: cover
object-fit: fill
object-fit: none
object-fit: scale-down
Values
- fill
- The replaced content is sized to fill the element’s box
- contain
- The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box
- cover
- The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box
- none
- The replaced content is not resized to fit inside the element’s content box
- scale-down
- Size the content as if ‘none’ or ‘contain’ were specified, whichever would result in a smaller concrete object size
Examples
Five simple img elements.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Object-fit example</title>
<link href="content-fit.css" type="text/css" rel="stylesheet">
</head>
<body>
<img src="/logo/wplogo_pillow_wide_tan.png"
alt="Webplatform Logo" class="fill"/>
<img src="/logo/wplogo_pillow_wide_tan.png"
alt="Webplatform Logo" class="contain"/>
<img src="/logo/wplogo_pillow_wide_tan.png"
alt="Webplatform Logo" class="cover"/>
<img src="/logo/wplogo_pillow_wide_tan.png"
alt="Webplatform Logo" class="none"/>
<img src="/logo/wplogo_pillow_wide_tan.png"
alt="Webplatform Logo" class="scale-down"/>
</body>
</html>
All five images are forced to 150x100 pixels, different from both the original size of the image (196x77 pixel) and its aspect ratio.
img {
float: left;
width: 150px;
height: 100px;
border: 1px solid #000;
margin-right: 1em;
}
.fill {
object-fit: fill;
/**
* This is the default behaviour.
* The image is forced to fill the whole box,
* the aspect ratio is ignored.
**/
}
.contain {
object-fit: contain;
/**
* The whole image will be displayed in the box
* and scaled down or expanded if necessary.
* The aspect ratio is maintained.
**/
}
.cover {
object-fit: cover;
/**
* The whole image is scaled down or expanded till
* it fills the box completely, the aspect ratio is
* maintained. This normally results in only part of
* the image being visible.
**/
}
.none {
object-fit: none;
/**
* The image keeps it's original size.
* This may result in not filling the box
* completely or sticking out of it.
**/
}
.scale-down {
object-fit: scale-down;
/**
* The result of 'none' and 'contain' is compared
* and the smaller concrete object is displayed.
**/
}
Related specifications
- CSS Image Values and Replaced Content Module Level 3
- W3C Candidate Recommendation
See also
Related articles
Generated and Replaced Content
object-fit