CSS object-fit property

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, than the image height or width or both will be shrinked or expanded according to which is greater than the container and will be shown.

Example

Try Yourself

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.

Example

Try Yourself

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.

Example

Try Yourself