CSS Object-fit And Object-position Property Simplified With Easy-to-use Examples.
CSS Object-fit
The CSS object-fit property describes how to resize an image or video to fit its content box. Through the use of a predetermined width and height, it describes how an element fits within the container.
Typically, it is used with pictures or videos. This property describes how an element responds to the container's width and height.
Property Values
These are the main five values of this property:
Fill: It is the default setting. This value causes the whole object to fill the container. The substituted text is sized to fill the content box. The object will be compressed or stretched to fit inside the box if the aspect ratio of the object and the box don't match. Even though the image's aspect ratio is not the same, it will fill the space.
Contain: It alters the size of an element content size to fit inside the container. To maintain the aspect ratio and fit inside the element's content box. The image's aspect ratio is maintained while the image is squeezed into the box's width and height.
Cover: It resizes an element's content to fill its container. The image fills the box. The object is clipped to fit if the aspect ratio of the object and the box are not the same.
None: The replaced content isn't resized in any way. The parent's height and width are not taken into account, and the image remains at its original size.
Scale-down: It classifies the content as either none or contains. The smallest object size is produced as a result. It determines the smallest concrete object size by contrasting the none and contain.
Initial: The CSS object-fit property is set to fill because that is the default value, which causes the image to be stretched to fit the container.
Inherit: It receives the value from its original element.
Here is an example of each of the above property values.
Example 1: Fill Value
<html>
<head>
<style>
body{
text-align: center;
}
#img1{
width: 300px;
height: 300px;
border: 7px solid green;
}
#obj {
width: 500px;
height: 500px;
object-fit: fill;
border: 7px solid green;
}
#left{
float: left;
text-align: center;
padding-left: 200px;
}
#center{
float: center;
text-align: center;
}
</style>
</head>
<body>
<h1> Object-fit property example </h1>
<div id = "left">
<h2> Original image </h2>
<img id = "img1" src = "forest.jpg">
</div>
<div id= "center">
<h2> object-fit: fill; </h2>
<img id = "obj" src="forest.jpg" width="300" height="300"</div>
</body>
</html>
Example 2: Contain Value
<html>
<head>
<style>
body{
text-align: center;
}
#img1{
width: 300px;
height: 300px;
border: 7px solid green;
}
#obj {
width: 500px;
height: 500px;
object-fit: contain;
border: 7px solid green;
}
#left{
float: left;
text-align: center;
padding-left: 200px;
}
#center{
float: center;
text-align: center;
}
</style>
</head>
<body>
<h1> Object-fit property example </h1>
<div id = "left">
<h2> Original image </h2>
<img id = "img1" src = "forest.jpg">
</div>
<div id= "center">
<h2> object-fit: contain; </h2>
<img id = "obj" src="forest.jpg" width="300" height="300"</div>
</body>
</html>
Example 3: Cover Value
<html>
<head>
<style>
body{
text-align: center;
}
#img1{
width: 300px;
height: 300px;
border: 7px solid green;
}
#obj {
width: 500px;
height: 500px;
object-fit: cover;
border: 7px solid green;
}
#left{
float: left;
text-align: center;
padding-left: 200px;
}
#center{
float: center;
text-align: center;
}
</style>
</head>
<body>
<h1> Object-fit property example </h1>
<div id = "left">
<h2> Original image </h2>
<img id = "img1" src = "forest.jpg">
</div>
<div id= "center">
<h2> object-fit: cover; </h2>
<img id = "obj" src="forest.jpg" width="300" height="300"</div>
</body>
</html>
Example 4: None value
<html>
<head>
<style>
body{
text-align: center;
}
#img1{
width: 300px;
height: 300px;
border: 7px solid green;
}
#obj {
width: 500px;
height: 500px;
object-fit: none;
border: 7px solid green;
}
#left{
float: left;
text-align: center;
padding-left: 200px;
}
#center{
float: center;
text-align: center;
}
</style>
</head>
<body>
<h1> Object-fit property example </h1>
<div id = "left">
<h2> Original image </h2>
<img id = "img1" src = "forest.jpg">
</div>
<div id= "center">
<h2> object-fit: none; </h2>
<img id = "obj" src="forest.jpg" width="300" height="300"</div>
</body>
</html>
Example 5: Scale-down Value
<html>
<head>
<style>
body{
text-align: center;
}
#img1{
width: 300px;
height: 300px;
border: 7px solid green;
}
#obj {
width: 500px;
height: 500px;
object-fit: scale-down;
border: 7px solid green;
}
#left{
float: left;
text-align: center;
padding-left: 200px;
}
#center{
float: center;
text-align: center;
}
</style>
</head>
<body>
<h1> Object-fit property example </h1>
<div id = "left">
<h2> Original image </h2>
<img id = "img1" src = "forest.jpg">
</div>
<div id= "center">
<h2> object-fit: scale-down; </h2>
<img id = "obj" src="forest.jpg" width="300" height="300"</div>
</body>
</html>
CSS Object-position Property
This CSS property defines how the content will be aligned inside the container. It describes how an element, such as video> or img>, is positioned with x/y coordinates within its container when used in conjunction with the object-fit property.
All images are automatically centered in their containers when using the object-fit property because the default value for object-position is 50% 50%. By using the object-position property, we are able to modify the default alignment.
Property Values
Position: It specifies where the video or image is inside the container. It requires two numerical values: the first value controls the x-axis, and the second value controls the y-axis (for example, 0 10px). The value may be either a number (in% or px) or a string (left, right, or center). Negative values are permitted. The default setting is 50%/50. String values, such as the right top, and left bottom, can be used, etc.
Initial: This sets the property's value to the default.
Inherit: It inherits the property from its original element.
Let's look at a few examples that will help to clarify the object-position property.
Example
<!DOCTYPE html>
<head>
<title>CSS object-position property</title>
<style>
body{
text-align: center;
}
img {
width: 400px;
height: 400px;
border: 5px solid green;
background-color: pink;
object-fit: none;
object-position: 90px 200px;
}
</style>
</head>
<body>
<h2> object-position: 90px 200px </h2>
<img src= "forest.jpg"/>
</body>
</html>
Example- Using "center top"
<!DOCTYPE html>
<head>
<title>CSS object-position property</title>
<style>
body{
text-align: center;
}
img {
width: 400px;
height: 300px;
border: 5px solid geen;
background-color: pink;
object-fit: none;
object-position: center top;
}
</style>
</head>
<body>
<h2>object-position: center top</h2>
<img src= "forest.jpg"/>
</body>
</html>
Example- Using "right top"
<!DOCTYPE html>
<head>
<title>CSS object-position property</title>
<style>
body{
text-align: center;
}
img {
width: 400px;
height: 300px;
border: 5px solid green;
background-color: pink;
object-fit: none;
object-position: center top;
}
</style>
</head>
<body>
<h2>object-position: center top</h2>
<img src= "forest.jpg"/>
</body>
</html>
Example- Using "left top"
<!DOCTYPE html>
<head>
<title>CSS object-position property</title>
<style>
body{
text-align: center;
}
img {
width: 400px;
height: 300px;
border: 5px solid green;
background-color: pink;
object-fit: none;
object-position: left top;
}
</style>
</head>
<body>
<h2>object-position: left top</h2>
<img src= "forest.jpg"/>
</body>
</html>
Example- Using "initial"
If the initial value is used, the image will be placed in the center. It is so because the property's initial value is set to 50% 50%, which is its default value.
<!DOCTYPE html>
<head>
<title>CSS object-position property</title>
<style>
body{
text-align: center;
}
img {
width: 400px;
height: 400px;
border: 5px solid green;
background-color: pink;
object-fit: none;
object-position: initial;
}
</style>
</head>
<body>
<h2> object-position: initial</h2>
<img src= "forest.jpg"/>
</body>
</html>
To learn more about CSS, visit our CSS Tutorial Page.
