When building a website, you will need to fit and position all its elements in various ways. Thankfully, CSS object-fit and object-position will do the trick. In this topic, you will learn the difference between object-fit and object-position and how to use them on an example code. Let's get started!
object-fit
The object-fit CSS property sets how the content of a replaced element, such as <img> or <video>, should be resized to fit its container. With this property, you can set the content you want to fit in the container as you wish. There are several values that you can apply to the object-fit property depending on how you want your content to fit the container. Here are the values you can work with:
fillcontaincovernonescale-down
Through examples, we will demonstrate how each of these values behaves when applied to the object-fit property. Down below we have a starter HTML and CSS code that we will use to show you all the object-fit values:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="photo.png" alt="Mountain">
</body>
</html>As you can see, we have one image. We will set that image with heightof 350px, and width of 250px. Also, we will set the border so we can clearly see how the image changes:
img {
height: 350px;
width: 250px;
border: 1px solid black;
}The starting image looks like this:
Now let's apply the different values to it to see the difference.
object-fit values
First, let's study the fill value. Its name speaks for itself. The replaced content is sized to fill the element's content box. Meaning, the entire object will fill the box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit it. Let's apply it to the image:
img {
height: 350px;
width: 250px;
border: 1px solid black;
object-fit: fill;
}The output is the following:
As you can see, the image looks proportional. But let's change its height and width:
img {
height: 150px;
width: 250px;
border: 1px solid black;
object-fit: fill;
}The output changes accordingly:
The image now looks completely different. That's because it is stretched to fit the set width and height.
The next value we will demonstrate is the contain value. With the contain value the replaced content is scaled to maintain its aspect ratio while fitting within the element's content box. The entire object is made to fill the box while preserving its aspect ratio. Let's look at the example:
img {
height: 150px;
width: 250px;
border: 1px solid black;
object-fit: contain;
}The code output is the following:
From the output, you can see that the image is preserving its ratio.
The next value is the cover value. It makes the replaced content maintain its aspect ratio while filling the element's entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit it. Here is how to apply the cover value:
img {
height: 350px;
width: 250px;
border: 1px solid black;
object-fit: cover;
}This is the result that we get:
The image covers the entire container box. This value is great to use when you want to fill the background of the website with a picture.
Moving on, let's apply the none value to the image. When you use the none value, the replaced content is not resized. The image will ignore the height and width of the parent and retain its original size. Let's see how it's used:
img {
height: 350px;
width: 250px;
border: 1px solid black;
object-fit: none;
}As you can see the image is completely unrecognizable, because it ignores the heightand width of the image box.
And to finish the object-fit property, let's cover the usage of the scale-down value. The scale-down value makes the content sized as if none or contain were specified, whichever would result in a smaller concrete object size. Let's apply the scale-down value to the image:
img {
height: 350px;
width: 250px;
border: 1px solid black;
object-fit: scale-down;
}The image looks exactly like if we used the contain value. The difference between the contain and scale-down is that the scale-down value will compare the difference between none and contain to find the smallest concrete object size.
object-position
In this section, you will learn what the object-position property is and how to use it.
The object-position CSS property specifies the alignment of the selected replaced elements' contents within the element's box. Areas of the box that aren't covered by the replaced element's object will show the element's background. This property is used to align any selected replaced element within the box that contains it. The most common usage of this property is with the img element. We too will demonstrate its usage with an img element. Nevertheless, you can also use it with other types, such as iframe, video, and embed.
Now that we covered the basics of the object-position property, let's see what values we can use with it.
object-position values
In this section, we will demonstrate only the positional values, since there is no difference between the global values. Meaning, the global values will output the same image as object-position: 50% 50%;. After the demonstration, there will be a list of values that you can try yourself. The code down below shows some of the global and positional values you can use with the object-position property:
/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;
/* Positional values */
object-position: 50% 50%; /* default position */
object-position: right bottom;
object-position: 20px 95px;
object-position: center 20px; /* mix and match */
object-position: 60% top; /* mix and match */In the example, we'll use the same HTML code but with another picture so you can see the difference more easily. This is our starting CSS code:
img {
height: 250px;
width: 250px;
object-fit: none;
border: 1px solid rgb(0, 0, 0);
}And this is our starting output:
The first value is 50% 50%. This value is a default value, and the output will look just like the image above. We will only use this example to show you how to apply it to the CSS:
img {
height: 250px;
width: 250px;
object-fit: none;
border: 1px solid rgb(0, 0, 0;
object-position: 50% 50%;
}Down below, you can see the difference between the object-position positional values:
There are many positions that you can use to place your element as you wish. We will not cover all of them in this topic, but here is a list of more values you can try out:
/* Keyword values */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;
/* <percentage> values */
object-position: 25% 75%;
/* <length> values */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;
/* Edge offsets values */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;
/* Global values */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;Conclusion
In this topic, we've covered two CSS properties:
object-fitobject-position
You've learned about their differences, and how to properly use them. Now, let's test your knowledge.