Introduction to CSS object-fit
CSS object-fit is one of the CSS properties and will define how to specify the resizing property in an image or video that fits into a content box. An object-fit fix an issue related to image resizing like loss of aspect ratio and squished images. The object-fit property makes more sense when an image is part of the content which comes with image tag <img> to achieve the desired result. And they are element inserted directly into HTML code. When we need all of our images on a web page of small values (like profile pictures) on height and width this object-fit helps well.
Syntax and parameters:
The syntax to use this property in CSS is given below:
Object-fit: property values;
The possible Property values are fill, cover, contain, initial, scale-down, inherit and none.
How object-fit Property works in CSS?
As we all knew videos and images have problems while layout the websites. Like when we have limited space then we need to alter an images height therefore resizing the browsers will not meet aspect ratio so these problems can be solved using CSS-object fit and positioning as well. Before that, we should know the difference between an image and image content-box. The image says that it’s an original image with height and width and the content box has an element <img> inside the web page by specifying their width and height values.
These properties are very similar to the background-colour properties of CSS. This Object-fit works well with replaced elements i.e. an image and background properties cannot be applied to video part but the object-fit goes well. And replaced element is said to be an element whose dimensions are defined out of boundaries of CSS. The exact examples are <img> and <video> in case of embedded documents it is <input> element.
The object-fit has following possible values which are shown below:
- fill: It is considered to be a default value also initial value. This stretches an element container to make themselves to fit inside the container box. Here the height and width of the box are the same.
- cover: This property covers an entire container with the picture means it enlarges itself to maintain its aspect ratio.
- contain: In this property values the element content is resized to stay within the container box and still retains its aspect ratio. The main benefit is it makes the image to be available inside the content box. If it doesn’t fit inside the box then the background color which is been specified fills up the remaining space.
- scale-down: This compares the value of none and contain and choose the element which is smaller in size (scales down the particular image).
- none: Makes an element content to retain into original size by neglecting container size. This may lead the image out of the box or stretching out of the container sometimes. An intrinsic aspect ratio remains the same. Cropping may take place when the image overflow the box.
Examples of CSS object-fit
In this section we shall see an example with demonstration by changing an image width and height.
Example #1
So here is the short example for different attribute property values.
Code:
outfit.html
<!DOCTYPE html>
<html>
<head>
<title>
CSS Object-Fit Property Demo
</title>
<style>
img {
width: 230px;
height: 450px;
object-fit: Fill;
}
</style>
</head>
<body>
<h1>CSS Object-Fit Property Demo Using Fill </h1>
<imgsrc="cat.jpeg"lt=" Cat Animal Pic" width="550" height="150">
</body>
</html>
This fill property stretches an original image to fit the box which we could see in the below demo.
Output:
Using Cover:
An above HTML code is changed to this value to view different position of the Cat Image.
Code:
<style>
img {
width: 230px;
height: 450px;
object-fit: cover;
}
</style>
Here the image is cropped to fit in the box.
Output:
Using Contain:
For the same HTML code we have applied background color to differentiate the image. As the image fits with the box’s height and width the remaining space is showed as yellow here.
Code:
bg.html
<!DOCTYPE html>
<html>
<head>
<title>
CSS Object-Fit Property Demo
</title>
<style>
img {
width: 230px;
height: 450px;
background: yellow;
color: red;
object-fit: contain;
}
</style>
</head>
<body>
<h1>CSS Object-Fit Property Demo Using Contain </h1>
<imgsrc= "cat.jpeg"lt=" Cat Animal Pic" width="550" height="150">
</body>
</html>
Output:
Using Scale-down:
Code:
<style>
img {
width: 230px;
height: 450px;
object-fit: scale-down;
}
</style>
Output:
Example #2
Implementation showing all the values together.
Code:
outfit.html
<html>
<head>
<title>My CSS </title>
<link rel="stylesheet" href="css/outfit.css">
</head>
<body>
<h1>CSS object-fit</h1>
<section id="falls">
<h1>original images</h1>
<imgsrc="old-falls-street-logo-spotlight.jpg" alt>
<imgsrc="banner-niagara1.jpg" alt>
</section>
<section>
<h1>Original structure: <code>img { width: 150px; height: 150px; border: 1.5px solid; background:purple; }</code></h1>
<imgsrc="old-falls-street-logo-spotlight.jpg" alt>
<imgsrc="banner-niagara1.jpg.jpg" alt>
<h2>Squished Picture</h2>
</section>
<section class="contain">
<h1>Original Structure along with the image + <code>img { object-fit: contain }</code></h1>
<imgsrc="old-falls-street-logo-spotlight.jpg" alt>
<imgsrc="banner-niagara1.jpg" alt>
<h2>Images are appropriate with the Aspect ratio</h2>
</section>
<section class="cover">
<h1>Original Structure + <code>img { object-fit: cover; }</code></h1>
<imgsrc="old-falls-street-logo-spotlight.jpg" alt>
<imgsrc="banner-niagara1.jpg" alt>
<h2>Changes in image to cover the width and height</h2>
</section>
<section class="none">
<h1>Original Structure + <code>img { object-fit: none; }</code></h1>
<imgsrc="old-falls-street-logo-spotlight.jpg" alt>
<imgsrc="banner-niagara1.jpg" alt>
<h2>Images are cropped to maintain the original pic</h2>
</section>
</body>
</html>
And the CSS file for the above HTML code is given here.
Code:
outfit.css
body {
font-family: calibri, sans-serif;
margin: 1;
text-align: center; }
h1, h2 { font-weight: 80; }
section:nth-child(even) {
background: green;
}
#falls img {
width: 35%;
max-width: 250px;
height: auto;
margin: 1.5%;
}
section h1 {
font-weight: 400;
padding-top: 2.5rem;
}
code { font-family: inherit; font-weight: 80; }
section img {
width: 150px;
height: 150px;
border: 1.5px solid;
background: purple;
}
section.containimg {
object-fit: contain;
}
section.coverimg {
object-fit: cover;
}
section.noneimg {
object-fit: none;
}
Output:
Conclusion
Therefore, we have seen how this CSS Object-fits provides magic is manipulating with the image. It helps the web developers to give control access over the image content or media like video. Along with object-fit object-position plays an important role.
Recommended Articles
This is a guide to CSS object-fit. Here we discuss how object-fit property works in CSS with programming examples respectively. You may also have a look at the following articles to learn more –
