CSS object-fit Property
Cut off the sides of an image, preserving the aspect ratio, and fill in the space:
Definition and Usage
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".
|Default value:||see individual properties|
|Animatable:||no. Read about animatable|
The numbers in the table specify the first browser version that fully supports the property.
|fill||This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit||Demo ❯|
|contain||The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box||Demo ❯|
|cover||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||Demo ❯|
|none||The replaced content is not resized||Demo ❯|
|scale-down||The content is sized as if none or contain were specified (would result in a smaller concrete object size)||Demo ❯|
|initial||Sets this property to its default value. Read about initial|
|inherit||Inherits this property from its parent element. Read about inherit|
CSS tutorial: CSS object-fit
CSS reference: CSS object-position
HTML DOM reference: The objectFit property