The object-fit property defines how the contents of a replaced element responds to the height and width of it’s content box.


selector { 

    object-fit: fill | contain | cover | scale-down | none | initial | inherit;



The object-fit property accepts following values:

  • fill; The replaced element will fill entirely the element's content box with it's own width and height.
  • contain; The replaced element will fit within the content's box, and all that while maintaining it's own aspect ratio (width/height).
  • cover; The replaced element will size up or size down to fill entirely the scontent's box, while keeping it's aspect ratio (width/height).
  • scale-down; The new object is rendered down to whichever is a smaller size, the replaced element or the content's element.
  • none; It will trigger no rendering but instead will apply a default calculation which may make the object size same the replaced element's one. 
  • initialinherit


The example with object-fit property and fill value:

The example with object-fit property and contain value:

The example with object-fit property and cover value:


›› go to examples ››