What is the " object - fit " property in CSS3, and how does it affect the display of images or videos?

The object-fit property in CSS3 is used to specify how HTML elements such as <img>, <video>, and other replacement elements adapt to the dimensions of their container. This property is similar to the background-size property for background images, but object-fit applies to the content of the element rather than the background. It controls how the element is filled, ensuring that the content is displayed appropriately in containers of different sizes without distortion or warping.

object-fit property has the following values:

• fill: This is the default value. The element is scaled to fill the container completely, which may cause distortion of the image aspect ratio.
• contain: The element is scaled to maintain its original aspect ratio while fitting within one dimension of the container. This means the element will be fully visible, but may leave blank space above, below, or on the sides of the container.
• cover: The element is scaled to maintain its original aspect ratio while filling the entire container space. This typically results in parts of the element being cropped to fit the container.
• none: The element is not scaled, maintaining its original size.
• scale-down: The element behaves as if it were the smaller of none or contain, depending on which results in a smaller element.

Example Use Cases

Suppose you have a webpage that needs to display user-uploaded photos. The uploaded images vary in size and aspect ratio. To ensure a clean and aesthetically pleasing page layout while preserving the original aspect ratio and quality of the images, you can use the object-fit property.

For example, if you want the image to always fill the specified container regardless of whether parts are cropped, set object-fit: cover. This ensures that the image fills the entire container, but may crop parts of the image.

html
<style>
  img {
    width: 300px;
    height: 200px;
    object-fit: cover;
  }
</style>
<img src="path/to/image.jpg" alt="Sample Image">

In this example, regardless of the original image size, it is scaled to fill the entire 300px × 200px container while maintaining the image's aspect ratio, but parts of the image may be cropped.

Using the object-fit property can significantly enhance the visual appearance and user experience of webpages, especially when dealing with media files of various sizes and aspect ratios.