29. How does the `object-fit` property work in CSS?

The object-fit property in CSS specifies how the content of an element, such as an image or video, is scaled to fit its container. It is useful for fitting images into containers with fixed dimensions.

Examples of using object-fit:

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

object-fit values:

1. fill - default value, stretches the image to fill the container.
2. contain - scales the image to fit within the container, maintaining its aspect ratio.
3. cover - scales the image to cover the container, maintaining its aspect ratio, may crop the image.
4. none - the image is not scaled and is displayed at its original size.
5. scale-down - scales the image to the smaller of either none or contain.

Example:

<img src="example.jpg" style="object-fit: cover;">