CSS Object-fit

CSS object-fit property defines how an element responds to the height and width of its content box. It sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

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

Object-fit values

1. fill: this is the default value which stretches the image to fit the content box, regardless of its aspect-ratio.
2. contain: increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.
3. cover: the image will fill the height and width of its box, once again maintaining its aspect ratio but often cropping the image in the process.
4. none: image will ignore the height and width of the parent and retain its original size.
5. scale-down: the image will compare the difference between none and contain in order to find the smallest concrete object size.

CSS Object-fit fill

The replaced content is sized to fill the element’s content box. The entire object will completely fill the box.

img {
  width:100px;
  height:500px;
  object-fit: fill;
}

CSS Object-fit contain

The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box.

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

CSS Object-fit cover

The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box.

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

CSS Object-fit none

The replaced content is not resized.

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

CSS Object-fit scale-down

The content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.

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