objectfit

Object-fit is a CSS property that defines how the content of a replaced element should be resized to fit its content box. Replaced elements include resources such as images, videos, canvas, and iframes. The property determines how the element’s intrinsic aspect ratio is preserved when its box has different dimensions from the content.

The most common values are:

- fill: the content is stretched to fill the entire box, which may distort the aspect ratio.

- contain: the content is scaled to fit inside the box while preserving aspect ratio; the entire content is visible but there may be empty space.

- cover: the content is scaled to fill the box while preserving aspect ratio; some parts may be cropped to cover the entire box.

- none: no resizing is performed beyond preserving the element’s intrinsic size.

- scale-down: the content is scaled down as if by contain or shown at its intrinsic size, whichever is smaller.

Usage considerations include alignment and cropping. Object-fit works in conjunction with object-position to control how the content is aligned inside the box. It is most effective when the replaced element has explicit width and height; without those, the effect can be unpredictable.

Browser support and fallbacks: object-fit is supported in all major modern browsers, but not in older ones such as Internet Explorer. For environments requiring legacy support, a common fallback is to use the element’s content as a background image with background-size set to contain or cover, or to use polyfills that emulate the behavior.

Overall, object-fit provides a concise way to manage how visual media fills its container, reducing distortion and cropping when appropriate.