The object-fit property will defines how an element will fit into a box with an established height and width. Usually applied to an image or video, Object-fit accepts the following five values:
Fill stretches the image to fit the content box without regard to the image’s original aspect ratio.
Contain fits the image in the box’s height or width while maintaining the image’s aspect ratio.
Cover fills the entire box with the image. The image aspect ratio is preserved, but the image is cropped to the dimensions of the box.
None ignores the size of the box and is not resized.
Scale-down either sizes the object as
none or as
contain. It displays whichever option results in a smaller image size.