CSS object-fit
To indicate how an image or video should be shrunk to fit its content box, use the CSS object-fit property. The numerous ways to fill the content inside the content box or container are specified by this property, including maintaining the aspect ratio and stretching up and lifting up as much space as possible. The object-position property allows you to modify the alignment position of the content object within the box of the substituted element.
Property values: The sample below provides a good description of each property.
Fill:
This value is the default. Stretching the substituted image makes it fit the content box. Without regard for its aspect ratio, the substituted image will completely fill the box.
Syntax
Contain:
The updated image fits inside the content box while maintaining the original image's aspect ratio.
Cover:
This value also ensures that the substituted picture maintains the original image's aspect ratio while still fitting within the content box. When the aspect ratio of the original image and the aspect ratio of the content box differ, it may occasionally be clipped to fit.
None:
The substituted image will not take into account the original image's aspect ratio. As a result, it is not scaled.
Scale-Down:
The substituted picture is shrunk to produce the smallest object size as if none or contain were specified.