CSS object-fit Property
The object-fit property will define how an element will fit into a box with an established height and width.
Usually applied to an image or video.
Now we will see the syntax -
Syntax -
Object-fit : value;
Object-fit accepts the following five values -
1. Fill
Syntax -
Fill stretches the image to fit the content box without regard to the image's original aspect ratio.
Now we will see Example-
Example -
Output -
2. CONTAIN
Contain fits the image in the box's height or width while maintaining the image's aspect ratio.
Example -
Output -
3. COVER
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.
Example -
Output -
4. NONE
None ignores the size of the box and is not resized.
Example-
Output -
5. SCALE-DOWN
Scale-down either sizes the object as none or as contain. It displays whichever option results in a smaller image size.
Example -
Output -
