CSS object-fit

object-fit is a CSS property that specifies how an <img> or <video> should be resized to fit its container. This property is useful when you want to control how an image or video is displayed within its container. There are several values that you can use with the object-fit property:

• fill: The replaced content is sized to fill the container, stretching or squishing it in the process.
• contain: The replaced content is displayed at the largest size such that both its width and height can fit inside the content area.
• cover: The replaced content is sized to maintain its aspect ratio while filling the container’s entire content box.
• none: The replaced content is not resized.
• scale-down: The content is sized as if none or contain were specified (depending on which results in a smaller concrete object size).

Let's see some examples of how you can use the object-fit property:

Result:

Using object-fit: fill;

In the example above, we have an image that is resized to fill its container using the fill value for object-fit.

In this example, we have a video element that is resized to maintain its aspect ratio while filling the container's entire content box using the cover value for object-fit.

Experiment with different values for object-fit to see how they affect the sizing and display of images and videos within their containers!