CSS object-fit Property
- Introduction to CSS object-fit property
- The syntax of CSS object-fit property
- Example of CSS object-fit property
Introduction to CSS object-fit Property
CSS object-fit property describes how to resize an image or video to fit it in its container. Some times this may be that there is very little space available in your webpage and you want to show an image. When you show the image in that space, the image shrinks because of less space and does not display properly.
Or some times it may be that you have a lot of space available but the size of your image is very low. You want the image to cover the entire space but when you do so, the image gets very stretch and does not display properly.
Whatever the situation, you can resize image or video by the object-fit property. So that it can be properly displayed in the available space according to your requirement. For these values of this property, you have many options available.
Syntax of CSS object-fit Property
The general syntax of the CSS object-fit property has been given below.
object-fit: none | fill | contain | cover | scale-down;
As you can see in the above syntax, the object-fit property can have five possible values. These are explained below.
- none - Defining this value doesn't resize the object (image or video) in any way.
- fill - By defining this value, the container is completely filled by the object, whether it has to stretch or shrink the image. This value does not preserve the object aspect ratio (real object clarity). That is, the image quality is not taken into account while stretching and shrinking the image.
- contain - By defining this value, the size of the object is increased or decreased to fit in the container but the aspect ratio of the object is preserved.
- cover - By defining this value, the container is completely filled by the object and the aspect ratio of the object is also preserved. But the object is clipped from the sides to fill the container.
- scale-down - By using this value, the object is shrunk while preserving the aspect ratio of the object so that it can easily fit into the container.
Example of CSS object-fit Property
The CSS object-fit property has been explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> CSS object-fit Property Example </title>
<style>
.scaleDown
{
width: 600px;
height: 200px;
object-fit: scale-down;
}
</style>
</head>
<body>
<div>
<img class="scaleDown" src = "images/mbh-logo.png">
</div>
<style>
.scaleDown
{
width: 600px;
height: 200px;
object-fit: scale-down;
}
</style>
</head>
<body>
<div>
<img class="scaleDown" src = "images/mbh-logo.png">
</div>
</body>
</html>
The above example will produce the below output.
ReplyDeleteThis is an awesome post. Really very informative and creative contents.
Graphic Design company in Chennai