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