This CSS property specifies how a video or an image is resized to fit its content box. It defines how an element fits into the container with an established width and height.
It is commonly utilized with images or videos. This attribute determines the behavior of an element in response to changes in the width and height of its container.
Syntax
object-fit: fill | contain | cover | none | scale-down | initial | inherit;
Values
Primarily, this property is defined with five distinct values outlined as below:
It represents the initial value. By employing this particular value, the complete object is filled within the container. The substituted content is adjusted to occupy the content box fully. In cases where the object's aspect ratio differs from that of the box, the object will either be compressed or expanded to suit the box dimensions. The image will occupy the entire area, regardless of any mismatch in aspect ratios.
It adjusts the size of the element's content to fit within the container boundaries. This ensures that the image fits within the width and height of the box while preserving the image's original aspect ratio. The substituted content is proportionally scaled to fit within the element's content box, maintaining its aspect ratio.
It adjusts the size of the element to cover the container, filling the entire space with the image. In cases where the object's aspect ratio differs from that of the box, it will clip the object to ensure a proper fit.
none: The replacement content does not undergo resizing. The image maintains its initial dimensions and does not consider the dimensions of its container.
scale-down: It resizes the content to fit within the container or as per the specified dimensions. This method ensures that the object size is minimized by selecting the smallest size between fitting within the container or adhering to the specified dimensions.
It assigns the property to its default value, meaning the image is expanded to fill the container as fill is the default value.
It acquires the value from its parent element.
Now, let's explore the aforementioned property values through an example for each one.
Example: Using fill value
<html>
<head>
<style>
body{
text-align: center;
}
#img1{
width: 300px;
height: 300px;
border: 7px solid red;
}
#obj {
width: 500px;
height: 500px;
object-fit: fill;
border: 7px solid red;
}
#left{
float: left;
text-align: center;
padding-left: 200px;
}
#center{
float: center;
text-align: center;
}
</style>
</head>
<body>
<h1> Example of Object-fit property </h1>
<div id = "left">
<h2> Original image </h2>
<img id = "img1" src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</div>
<div id= "center">
<h2> object-fit: fill; </h2>
<img id = "obj" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" width="300" height="300"</div>
</body>
</html>
Output
Example- Using contain value
<html>
<head>
<style>
body{
text-align: center;
}
#img1{
width: 300px;
height: 300px;
border: 7px solid red;
}
#obj {
width: 500px;
height: 500px;
object-fit: contain;
border: 7px solid red;
}
#left{
float: left;
text-align: center;
padding-left: 200px;
}
#center{
float: center;
text-align: center;
}
</style>
</head>
<body>
<h1> Example of Object-fit property </h1>
<div id = "left">
<h2> Original image </h2>
<img id = "img1" src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</div>
<div id= "center">
<h2> object-fit: contain; </h2>
<img id = "obj" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" width="300" height="300"</div>
</body>
</html>
Output
Example- Using cover value
Example- Using cover value
<html>
<head>
<style>
body{
text-align: center;
}
#img1{
width: 300px;
height: 300px;
border: 7px solid red;
}
#obj {
width: 500px;
height: 500px;
object-fit: cover;
border: 7px solid red;
}
#left{
float: left;
text-align: center;
padding-left: 200px;
}
#center{
float: center;
text-align: center;
}
</style>
</head>
<body>
<h1> Example of Object-fit property </h1>
<div id = "left">
<h2> Original image </h2>
<img id = "img1" src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</div>
<div id= "center">
<h2> object-fit: cover; </h2>
<img id = "obj" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" width="300" height="300"</div>
</body>
</html>
Output
Example- Using none value
<html>
<head>
<style>
body{
text-align: center;
}
#img1{
width: 300px;
height: 300px;
border: 7px solid red;
}
#obj {
width: 500px;
height: 500px;
object-fit: none;
border: 7px solid red;
}
#left{
float: left;
text-align: center;
padding-left: 200px;
}
#center{
float: center;
text-align: center;
}
</style>
</head>
<body>
<h1> Example of Object-fit property </h1>
<div id = "left">
<h2> Original image </h2>
<img id = "img1" src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</div>
<div id= "center">
<h2> object-fit: none; </h2>
<img id = "obj" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" width="300" height="300"</div>
</body>
</html>
Output
Example- Using scale-down value
<html>
<head>
<style>
body{
text-align: center;
}
#img1{
width: 300px;
height: 300px;
border: 7px solid red;
}
#obj {
width: 500px;
height: 500px;
object-fit: scale-down;
border: 7px solid red;
}
#left{
float: left;
text-align: center;
padding-left: 200px;
}
#center{
float: center;
text-align: center;
}
</style>
</head>
<body>
<h1> Example of Object-fit property </h1>
<div id = "left">
<h2> Original image </h2>
<img id = "img1" src = "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</div>
<div id= "center">
<h2> object-fit: scale-down; </h2>
<img id = "obj" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" width="300" height="300"</div>
</body>
</html>
Output