Object Fit

Published: April 21, 2022By brooklynwriters
  • Width
  • Min Width
  • Max Width
  • Height
  • Min Height
  • Max Height
  • Box Sizing
  • Object Fit
  • Object Position

The object-fit CSS property sets how the content of a replaced element, such as an img or video, should be resized to fit its container.

Value Description
containThe object may be 'letter-boxed' to maintain its aspect ratio, while displaying entirely within the element's content box.
coverThe object may be clipped to maintain its aspect ratio, while ensuring it covers the whole element's content box.
fillLike cover, but the object may be stretched, rather than clipped, to ensure it fills the whole element's content box. This is the default.
noneThe object will not be resized.
scale-downThe content is sized as if 'none' or 'contain' were specified, whichever would result in a smaller concrete object size.

Themeover CSS Reference

Close