CSS The object-fit Property

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

The CSS object-fit Property

It determines how the content of the replaced element (such as an image or video) should be resized to fit within its container box. Here are the possible values for the object-fit property:

fill: The replaced element is stretched to fill the content box. This may cause distortion of the image's aspect ratio.
contain: The replaced element is scaled to maintain its aspect ratio while fitting within the content box. It may leave some empty space within the container if the aspect ratios don't match.
cover: The replaced element is scaled to maintain its aspect ratio while completely filling the content box. This might result in cropping of the image if its aspect ratio doesn't match the container's.
none: The replaced element is not resized to fit the content box. Its size remains unchanged, and it may overflow the content box if it is larger.
scale-down: The content is sized as if none or contain, whichever results in a smaller concrete object size.

Using object-fit: fill;

Using object-fit: fill; means that the replaced element (in this case, an image) will be stretched to fill the container, disregarding its aspect ratio. Here's how you can use it:

Example

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  overflow: hidden; /* Ensures that the image doesn't overflow the container */
}

img {
  width: 100%;
  height: 100%;
  object-fit: fill; /* Image is stretched to fill the entire container */
}

Explanation:

The .container class defines a container with a fixed width and height of 300px by 200px, along with a border for visualization.
The overflow: hidden; property ensures that any part of the image that exceeds the boundaries of the container is hidden from view.
The <img> element inside the container is set to occupy the entire space available within the container (width: 100%; height: 100%;).
The object-fit: fill; property ensures that the image is stretched to completely fill the container, disregarding its aspect ratio. This might result in distortion if the aspect ratio of the image differs significantly from that of the container.

Using object-fit: contain;

Using object-fit: contain; means that the replaced element (e.g., an image) will be scaled to maintain its aspect ratio while fitting entirely within the container without cropping. Here's how you can use it:

Example

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  overflow: hidden; /* Ensures that the image doesn't overflow the container */
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Image is scaled to fit entirely within the container */
}

Explanation:

The .container class defines a container with a fixed width and height of 300px by 200px, along with a border for visualization.
The overflow: hidden; property ensures that any part of the image that exceeds the boundaries of the container is hidden from view.
The <img> element inside the container is set to occupy the entire space available within the container (width: 100%; height: 100%;).
The object-fit: contain; property ensures that the image is scaled to maintain its aspect ratio and fit entirely within the container, without cropping. This means that there might be empty space within the container if the aspect ratios of the image and the container differ.

Using object-fit: cover;

Using object-fit: cover; ensures that the image covers the entire container while maintaining its aspect ratio, even if it means some parts of the image will be cropped. Here's a more detailed example:

Example

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  overflow: hidden; /* Ensures that the image doesn't overflow the container */
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Image covers the entire container */
}

Explanation:

The .container class defines a container with a fixed width and height of 300px by 200px, along with a border for visualization.
The overflow: hidden; property ensures that any part of the image that exceeds the boundaries of the container is hidden from view.
The <img> element inside the container is set to occupy the entire space available within the container (width: 100%; height: 100%;).
The object-fit: cover; property ensures that the image fills the container entirely, maintaining its aspect ratio. If the image's aspect ratio doesn't match the container's, it may result in some cropping to fit.

Using object-fit: none;

Using object-fit: none; means that the replaced element (e.g., an image) will not be resized to fit the container. Its size remains unchanged, and it may overflow the container if it is larger. Here's how you can use it:

Example

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  overflow: hidden; /* Ensures that the image doesn't overflow the container */
}

img {
  object-fit: none; /* Image is not resized to fit the container */
}

Explanation:

The .container class defines a container with a fixed width and height of 300px by 200px, along with a border for visualization.
The overflow: hidden; property ensures that any part of the image that exceeds the boundaries of the container is hidden from view.
The object-fit: none; property is applied to the image, indicating that the image will not be resized to fit the container. Therefore, if the image is larger than the container, it will overflow the container and may not be fully visible.

Using object-fit: scale-down;

Using object-fit: scale-down; resizes the content as if the value were either contain or none, whichever results in a smaller concrete object size.

Example

.container {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  overflow: hidden; /* Ensures that the image doesn't overflow the container */
}

img {
  object-fit: scale-down; /* Resizes content as if it were either 'contain' or 'none' */
}

Explanation:

The .container class defines a container with a fixed width and height of 300px by 200px, along with a border for visualization.
The overflow: hidden; property ensures that any part of the image that exceeds the boundaries of the container is hidden from view.
The object-fit: scale-down; property is applied to the image, which resizes the content as if it were either contain or none, whichever results in a smaller size. Therefore, if the content is smaller than its container, it remains its original size. If the content is larger, it scales down to fit within the container without distortion or cropping.