CSS Object Fit

CSS Object fit property can be used to specify how an HTML image or video element should fit in its container. There are various ways the image or video can fit in its container for example its aspect ratio can be preserved or we can make it stretch to completely fit the container.

The object fit property has 5 possible values:

• fill: The image will resize while not keeping its aspect ratio if necessary to occupy the given dimensions.
• contain: With this value, the image will maintain its aspect ratio and will be resized to fit in its given dimensions.
• cover: With this value, the image keeps its aspect ratio and fills the entire dimensions to cover the area.
• none: The image will not be resized with this value.
• scale-down: With this value, the image will be scaled down to a smallest version if none or contain was the provided value.

object-fit: cover

With object-fit: cover; as the value, the image keeps its aspect ratio and fills the entire dimensions to cover the area.

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

Output:

object-fit: contain

With object-fit: contain; as the value, the image will maintain its aspect ratio and will be resized to fit in its given dimensions.

img.second {
  width: 300px;
  height: 300px;
  object-fit: contain;
}

Output:

object-fit: fill

With object-fit: fill; as the value, The image will resize while not keeping its aspect ratio if necessary to occupy the given dimensions.

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

Output:

object-fit: none

With object-fit: none; as the value, the image will not be resized.

img.fourth {
  width: 300px;
  height: 300px;
  object-fit: none;
}

Output:

object-fit: scale-down

With object-fit: scale-down; as the value, the image will be scaled down to smallest version of if none or contain was the provided value.

img.fifth {
  width: 300px;
  height: 300px;
  object-fit: scale-down;
}

Output:

CSS Object Position

The CSS object-position property can be applied to an image or video element to specify how it gets positioned inside its container/dimensions.

In this example, the object position property is used to focus on a specific part of the image. Instead of percentages, we can also use phrases like “center” , “center top” to position the object.

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  object-position: 70% 100%;
}

Output: