HomeMenu
Jesus · Bible · HTML · CSS · JS · PHP · SVG · Applications

object-fit

Description

The object-fit property for CSS specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

Syntax

CSS

object-fit: value;

JS

object.style.objectFit = "value";

Values

<'object-fit'> = fill | contain | cover | none | scale-down
fill

The replaced content is sized to fill the element's content box.

contain

The replaced content is sized to maintain its aspect ratio while fitting within the element's content box.

cover

The replaced content is sized to maintain its aspect ratio while filling the element's entire content box.

none

The replaced content is not resized to fit inside the element's content box.

scale-down

Sizes the content as if none or cover were specified, whichever would result in a smaller concrete object size.

Initial

fill

Examples

1 · contain

2 · cover

3 · fill

4 · none

5 · scale-down

6 · JS