CSS object-fit Property

.example {
  width: 200px;
  height: 100px;
  object-fit: cover;
}

Meaning

The object-fit property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.

Note: You can alter the alignment of the replaced element's content object within the element's box using the object-position property.

Default value:	fill
Inherited:	No
Animatable:	No
Version:	CSS3
JavaScript syntax:	`object.style.objectFit="none\|fill\|contain\|cover\|scale-down\|initial\|inherit\|revert\|revert-layer\|unset";`

object-fit: none|fill|contain|cover|scale-down|initial|inherit|revert|revert-layer|unset;

The numbers in the table specify the first browser version that fully supports the property.

The following table describes the values of this property.

Value	Description
none	Sets the replaced content is not resized.
fill	This is default value. Sets the replaced content is sized to fill the element's content box.
contain	Sets the replaced content is scaled to maintain its aspect ratio while fitting within the element's content box.
cover	Sets the replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit.
scale-down	The content is sized as if none or contain were specified (would result in a smaller concrete object size).
initial	Sets this property to its default value.
inherit	If specified, the associated element takes the computed value of its parent element animation-delay property.
revert	Reverts the cascaded value of the property from its current value to the value the property
revert-layer	Rollback styles to the ones specified in previous cascade layers.
unset	Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

selectors {
  object-fit: fill;
}

This image is 600×400 pixels look without object-fill:

This value specifies the replaced content is not resized.

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

This is default value. and it sets the replaced content is sized to fill the element's content box.

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

It sets the replaced content is scaled to maintain its aspect ratio while fitting within the element's content box.

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

It sets the replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit.

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

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

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