Using CSS’s object-fit and object-position Properties
Videos and images have the potential to pose problems when laying out a website.
Let’s say you have specified the width of an image explicitly in your CSS. If the width is specified in percentages or viewport units and the image’s height is set to auto, resizing the browser window will keep the aspect ratio of the image.
However, sometimes you may have limited space available and need to put a constraint on an image’s height. Resizing the browser window now will definitely mess up its aspect ratio.
Many problems related to image size and aspect ratio, including the one I just discussed, can be solved using CSS’s object-fit and object-position properties.
These properties are similar to the more familiar background-sizeand background-position properties. So, even if you have never heard about them before, you won’t have much trouble in understanding how they work.
Both properties work on replaced elements. However, for the sake of brevity, in this article I will use the term image(s) instead of replaced element(s).
Why Use object-fit and object-position?
You might be wondering why use these two properties at all when you can use background-size and background-position. Actually, there are at least two good reasons.
First, consider a scenario where you have an image that is supposed to be part of an article. If the image dimensions are set in CSS just like the case described in the introduction, resizing the browser window will mess up its aspect ratio. In such a case, you will be tempted to use a div with background-size and background-position properties because simply using an img tag won’t be sufficient.
The problem with this solution is that you should always try to keep your content and presentation separate. The background properties are meant to be used for presentation purpose. When your images are actually part of the content, it makes more sense to use object-fit and object-position along with the img tag to achieve the same result.
The other reason is that the background properties cannot be applied to videos whereas object-fit and object-position can. Therefore, when displaying videos, object-fit and object-position are your only options.
The object-fit Property
This property determines how replaced content like images and videos occupy the space inside their content box. It has five possible values:
fillcontaincovernonescale-down
The syntax to use this property is shown below:
.fit-image {
object-fit: fill|contain|cover|none|scale-down;
}When set to fill, the image is sized to fit completely inside the content box. The height of image in this case is equal to the height of the box itself. This is also the initial value of the object-fit property.
See the Pen Object Fit: Fill by SitePoint (@SitePoint) on CodePen.
The value contain resizes the image in such a way that the image fits within its content box while still retaining its aspect ratio. This serves two purposes. It avoids image distortion and at the same time keeps the image inside the content box. If the image does not completely cover the content box, the background color that you might have set fills up the remaining space.
See the Pen Object Fit: Contain by SitePoint (@SitePoint) on CodePen.
The contain value can be useful in situations where you don’t know the dimensions of the image but still want it to fit inside a container of known width.
If you want the image to fill the space inside its content box entirely and still keep its intrinsic aspect ratio, you should use the cover property. In this case, the image is scaled in such a way that the smaller side of the image fits the containing box perfectly. Any part of the image that overflows the box is then cropped.
See the Pen Object Fit: Cover by SitePoint (@SitePoint) on CodePen.
To show the image with its intrinsic dimensions and ignore any height or width value set on the containing box, you can use none. The image is not resized in this case. However, if any part of the image lies outside its containing box, then it will be cropped.
See the Pen Object Fit: None by SitePoint (@SitePoint) on CodePen.
Our final object-fit value is scale-down. As the name suggests, it scales down the image. This means it will be resized as if it has been set to none or contain based on which value results in a smaller image. In other words, if none of the dimensions of our image are greater than the respective dimensions of its containing box, the value none is applied.
See the Pen Object Fit: scale-down by SitePoint (@SitePoint) on CodePen.
The object-position Property
As we saw earlier, the cover property fills up all space inside the containing box while still preserving the intrinsic aspect ratio of images. The images are also placed centrally by default. In situations where the focus point is at the center, this will serve you well. But, what if the focus point of images is not at the center?
The object-position property can help you here. It works just like background-position. The code snippet below sets the position of the image to the top left:
.zero-zero {
object-position: 0px 0px;
}Instead of specifying the dimensions in pixels, you can use percentages. For instance, object-position: 0% 0% is top-left and object-position: 100% 100% is bottom-right. This can be helpful when you don’t know the image dimensions.
When the aspect ratios of your image and its containing box are similar, setting object-position won’t seem to make much difference. However, the results improve when the aspect ratios are off by a noticeable factor. The CodePen demo below illustrates my point.
See the Pen GZewMJ by SitePoint (@SitePoint) on CodePen.
Setting position to top-left in the second case brings the sun back into focus.
One more thing worth mentioning about the object-position property is that it is animatable and can produce stunning effects if used properly. Consider the code below:
img {
/* other CSS here... */
object-fit: cover;
object-position: 0% 0%;
animation: ltr 5s alternate infinite;
}
@keyframes ltr {
0% {
object-position: 0% 0%;
}
25% {
object-position: 20% 0%;
}
100% {
object-position: 100% 100%;
}
}With this code, I am animating the position of the image using keyframe animations and, as you can see, the final result looks great.
See the Pen Animating the object-position Property by SitePoint (@SitePoint) on CodePen.
This could probably also be used in videos when focus moves from one person to another.
Browser Support and Polyfills
While these properties can prove to be very useful, whether you can actually use them in real world depends on the browsers you support. object-fit is supported in all major browsers except IE/Edge and object-position is supported in all major browsers except IE/Edge and Safari.
Generally, you might just need the object-fit property. If you are willing to sacrifice the user experience of some users you can go ahead and use this property. When you need to support older browsers, you can try the polyfill by Federico Brigante.
Conclusion
I hope you enjoyed this tutorial and the accompanying demos. If there is something that I have missed or if you have anything to add, please let me know in the comments.
