What is the CSS object-fit property?

object-fit controls how a replaced element (primarily <img> and <video>) is scaled and positioned within its container when the element's intrinsic aspect ratio differs from the container's. fill (default): stretches to fill, potentially distorting the image. contain: scales to fit entirely within the box, preserving aspect ratio — may leave empty space ("letterbox"). cover: scales to fill the box entirely, preserving aspect ratio — may crop edges. This is the most commonly used value for hero images and avatars. none: no scaling. scale-down: smaller of none or contain. Pair with object-position (like background-position) to control where the image is cropped.