CSS object-fit
CSS object-fit is used to specify how the contents of <img> and <video> should be adjusted in-order to fit in an container.
CSS object-fit property values are
- fill
- cover
- contain
- none : The image will not be resized.
- scale-down : It works similar to none or contain.
fill value for css object-fit property
It is used to show the image fully covering the container. If the container is less than the image, then the image height or width or both will be shrinked or expanded according to which is greater than the container and will be shown.
cover value for css object-fit property
It is used to show the image in its original aspect ratio. If the image is greater than the container, the image will be cropped and shown.
contain value for css object-fit property
It is used to maintain the images aspect ratio when placing it inside a container, even if the image is lesser or greater than the container.