The object-fit property in CSS is used to control how an image or replaced element should be resized and fitted within its container. It allows you to specify whether the content should maintain its aspect ratio, be stretched, or fill the container while preserving its intrinsic proportions.

Note: The object-fit property can take values such as fill, contain, cover, none, or scale-down.

Syntax:

/* Ensuring that an image completely covers its container */
img {
  object-fit: cover;
}

Features

• Aspect Ratio Control: object-fit provides control over how content is fitted while maintaining its aspect ratio.
• Values:
  • fill: Stretches the content to completely fill the container, potentially distorting the aspect ratio.
  • contain: Ensures that the entire content is visible, scaling it to fit within the container.
  • cover: Ensures that the content covers the entire container, cropping it if necessary.
  • none: Leaves the content as is, potentially overflowing the container.
  • scale-down: Performs either none or contain, whichever results in a smaller concrete object size.