CSS OBJECT FIT:
Object-fit is a CSS property that used to control how an image, video element should behave when its size does not perfectly match the size of its containing element.
It allows to specify how the content inside these elements should be resized and positioned within the container.
Syntax:
object-fit: fill | contain | cover | scale-down | none | initial | inherit;
Properties Of CSS Object fit:
Fill:
This is the default value. It forces the content to completely fill the container, making it look stretched and possibly misshapen to fit the container's size.
Contain:
The content is scaled to fit inside the container while maintaining its original proportions. This might result in empty space around the content if the aspect ratios differ.
Cover:
It scales the content proportionally to cover the entire container. This may result in parts of the content being cropped if the aspect ratios don't match. The content will be centered within the container.
Scale-down:
It scales the content proportionally to fit inside the container, but it will not be upscaled if it is smaller than the container. This means it behaves like 'contain' but only if necessary to make the content fit without upscaling.
None:
It does not scale the content at all. The content retains its original size and may overflow the container if its dimensions are larger than the container's dimensions.
