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:

  • fill
  • contain
  • cover
  • none
  • scale-down

The syntax to use this property is shown below:

[code language=”css”]
.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.

Continue reading %Using CSS’s object-fit and object-position Properties%

Source: Sitepoint