Apart from styling images, videos, or other content of such type appearing on the web pages, designating these the right fit and position are highly crucial when designing the structure of a website. Some properties have been provided in CSS that let you perform these tasks with great ease and merely a single line of code. We have enlisted these properties below.
Let’s dive into their depths below.
Object-fit Property
For the purpose of specifying how a video or an image appearing on a web page will be resized to adjust its container, the object-fit property is used. This property basically describes how an element will act when the size of the container holding it changes.
Syntax
All of these parameters are explained in the table below.
| Parameters | Description |
|---|---|
| none | This value does not resize the content. |
| fill | This is a default value that will make the content fill its container either by stretching or squeezing. |
| cover | It is used to make the content fill its container while preserving its aspect ratio. |
| contain | It is also used to make the content fill its container by clipping while preserving its aspect ratio. |
| scale-down | This value either inherits properties of the none value or contains a value. |
| initial | This value sets the property to its default value. |
| inherit | It inherits the property from its predecessor element. |
Let’s explore the object-fit property further with the help of examples.
Example
To better understand the various values of the object-fit property let’s first embed an image in our web page using HTML.
HTML
Here we have added an image in the src attribute of the <img> tag.
Output
An image has been embedded in the web page.
Now let’s explore different parameters of the object-fit property and see what these do to the image above.
Fill
Here we have set some width and height of the image and the object-fit property has been provided the fill value that will make the image fit its container by either squeezing or stretching.
width: 200px;
height: 300px;
object-fit: fill;
}
Output
The image has been squeezed to fill its container.
Cover
The cover value of the object-fit property will cut the sides of the images and fit it inside the container maintaining its aspect ratio.
width: 200px;
height: 300px;
object-fit: cover;
}
Output
The cover parameter is working properly.
Contain
Apart from giving some width and height to the image, we have set the object-fit property to contain which will clip the image in the container while preserving its aspect ratio.
width: 200px;
height: 300px;
object-fit: contain;
border: 5px solid blue;
}
Output
The image has been clipped successfully.
Scale-down
The scale-down parameter of the object-fit property either inherits properties from the cover parameter or the contain parameter.
width: 200px;
height: 300px;
object-fit: scale-down;
border: 5px solid blue;
}
Output
The scale-down value is working properly.
Object-position Property
In order to specify how an element(particularly an image or a video) should be positioned along the horizontal or vertical dimension inside its container, the object-position property is used. This property is always used along with the object-fit property.
Syntax
The position parameter describes the position of the image or video along the x, and y axes. It can either be a string such as left, right, center, or a number in pixels or percentage.
For a better understanding, here is an example of the object-position property. We consider the image used in the above examples. For the purpose of defining its position along with how it will be resized to fit its container, use the following code snippet.
CSS
width: 200px;
height: 300px;
object-fit: contain;
object-position: 1% 90%;
border: 5px solid blue;
}
In the above code, we are setting the object-fit property to contain which means that the image will be clipped inside the container while maintaining its aspect ratio. Meanwhile, the top and left positions of the image have been assigned 1%, whereas the bottom and right positions have been assigned 90%. Lastly, the border of the container has been given 5px with a solid blue color.
Output
The object-position property has been implemented successfully.
Conclusion
CSS provides object-fit and object-position properties that help set the dimensions of the images. The object-fit property describes how a video, or an image will be resized to adjust its container, meanwhile, the object-position property defines how an element(particularly an image or a video) should be positioned along the horizontal or vertical dimension inside its container. Both of these properties along with various values that these can render have been demonstrated in this post through examples.
