CSS The object-fit Property

The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

The CSS object-fit Property

The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

This property tells the content to fill the container in a variety of ways; such as “preserve that aspect ratio” or “stretch up and take up as much space as possible”.

Example

img {
  width: 200px;
  height: 300px;
}

We see that the image is being squished to fit the container of 200×300 pixels (its original aspect ratio is destroyed).

Here is where the object-fit property comes in. The object-fit property can take one of the following values:

  • fill – This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit
  • contain – The image keeps its aspect ratio, but is resized to fit within the given dimension
  • cover – The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit
  • none – The image is not resized
  • scale-down – the image is scaled down to the smallest version of none or
    contain

Using object-fit: cover;

If we use object-fit: cover; the image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit.

Example

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

Using object-fit: contain;

If we use object-fit: contain; the image keeps its aspect ratio, but is resized to fit within the given dimension.

Example

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

Using object-fit: fill;

If we use object-fit: fill; the image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit.

Example

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

Using object-fit: none;

If we use object-fit: none; the image is not resized.

Example

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

Using object-fit: scale-down;

If we use object-fit: scale-down; the image is scaled down to the smallest version of none or
contain.

Example

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

 CSS object-fit More Examples

The following example demonstrates all the possible values of the object-fit property in one example:

Example

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}