CSS Object-fit Property

The object-fit property is a relatively new addition to CSS3 that allows you to control how an image or video is resized within its container. It is used to specify how an element’s content should be fitted to its container.

Syntax:

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

1. fill: This value stretches the image to fit the container’s width and height without preserving its aspect ratio. It may result in the image being distorted.
2. contain: This value scales the image down to fit within the container while preserving its aspect ratio. This means that the image may not fill the entire container, and there may be empty space around it.
3. cover: This value scales the image up to completely fill the container, while preserving its aspect ratio. This may result in the image being cropped, so only part of it is visible.
4. none: This value does not resize the image, and it will be displayed at its original size, regardless of the size of the container.
5. scale-down: This value scales the image down to the largest size that fits within the container, while preserving its aspect ratio. If the image is smaller than the container, it will be displayed at its original size.

Example:

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

In this example, the object-fit property is set to cover. The image will be scaled up or down to completely fill the container, while preserving its aspect ratio. If the image is not the same aspect ratio as the container, some parts of the image may be cropped.