html

CSS Object-fit & Object-position Properties | Explained

Apart from styling images, videos, or other content of such type appearing on the web pages, designating these the right fit and position are highly crucial when designing the structure of a website. Some properties have been provided in CSS that let you perform these tasks with great ease and merely a single line of code. We have enlisted these properties below.

  1. Object-fit Property
  2. Object-position Property

Let’s dive into their depths below.

Object-fit Property

For the purpose of specifying how a video or an image appearing on a web page will be resized to adjust its container, the object-fit property is used. This property basically describes how an element will act when the size of the container holding it changes.

Syntax

object-fit: none | fill | cover | contain | scale-down | initial | inherit;

All of these parameters are explained in the table below.

Parameters Description
none This value does not resize the content.
fill This is a default value that will make the content fill its container either by stretching or squeezing.
cover It is used to make the content fill its container while preserving its aspect ratio.
contain It is also used to make the content fill its container by clipping while preserving its aspect ratio.
scale-down This value either inherits properties of the none value or contains a value.
initial This value sets the property to its default value.
inherit It inherits the property from its predecessor element.

Let’s explore the object-fit property further with the help of examples.

Example

To better understand the various values of the object-fit property let’s first embed an image in our web page using HTML.

HTML

<img src="ball.jpg" alt="Ball">

Here we have added an image in the src attribute of the <img> tag.

Output

An image has been embedded in the web page.

Now let’s explore different parameters of the object-fit property and see what these do to the image above.

Fill

Here we have set some width and height of the image and the object-fit property has been provided the fill value that will make the image fit its container by either squeezing or stretching.

img {
  width: 200px;
  height: 300px;
  object-fit: fill;
 }

Output

The image has been squeezed to fill its container.

Cover

The cover value of the object-fit property will cut the sides of the images and fit it inside the container maintaining its aspect ratio.

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}

Output

The cover parameter is working properly.

Contain

Apart from giving some width and height to the image, we have set the object-fit property to contain which will clip the image in the container while preserving its aspect ratio.

img {
  width: 200px;
  height: 300px;
  object-fit: contain;
  border: 5px solid blue;
 }

Output

The image has been clipped successfully.

Scale-down

The scale-down parameter of the object-fit property either inherits properties from the cover parameter or the contain parameter.

img {
  width: 200px;
  height: 300px;
  object-fit: scale-down;
  border: 5px solid blue;
 }

Output

The scale-down value is working properly.

Object-position Property

In order to specify how an element(particularly an image or a video) should be positioned along the horizontal or vertical dimension inside its container, the object-position property is used. This property is always used along with the object-fit property.

Syntax

object-position: position | initial | inherit;

The position parameter describes the position of the image or video along the x, and y axes. It can either be a string such as left, right, center, or a number in pixels or percentage.

For a better understanding, here is an example of the object-position property. We consider the image used in the above examples. For the purpose of defining its position along with how it will be resized to fit its container, use the following code snippet.

CSS

img {
  width: 200px;
  height: 300px;
  object-fit: contain;
  object-position: 1% 90%;
  border: 5px solid blue;
}

In the above code, we are setting the object-fit property to contain which means that the image will be clipped inside the container while maintaining its aspect ratio. Meanwhile, the top and left positions of the image have been assigned 1%, whereas the bottom and right positions have been assigned 90%. Lastly, the border of the container has been given 5px with a solid blue color.

Output

The object-position property has been implemented successfully.

Conclusion

CSS provides object-fit and object-position properties that help set the dimensions of the images. The object-fit property describes how a video, or an image will be resized to adjust its container, meanwhile, the object-position property defines how an element(particularly an image or a video) should be positioned along the horizontal or vertical dimension inside its container. Both of these properties along with various values that these can render have been demonstrated in this post through examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.