Object fit property (object-fit)

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

Syntax:

selector { 

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

}

Values:

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. 
• initial, inherit

Examples

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 ››