CSS object-fit Property

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

Formal syntax: fill | contain | cover | none | scale-down

object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

• fillThe replaced content is sized to fill the element's content box: the object's concrete object size is the element's used width and height.
• containThe replaced content is sized to maintain its aspect ratio while fitting within the element's content box: its concrete object size is resolved as a contain constraint against the element's used width and height.
• coverThe replaced content is sized to maintain its aspect ratio while filling the element's entire content box: its concrete object size is resolved as a cover constraint against the element's used width and height.
• noneThe replaced content is not resized to fit inside the element's content box: determine the object's concrete object size using the default sizing algorithm with no specified size, and a default object size equal to the replaced element's used width and height.
• scale-downSize the content as if 'none' or 'contain' were specified, whichever would result in a smaller concrete object size.

.class {
   object-fit: cover;
}

?

?

?

?

?

• Share on Facebook
• Share on Twitter
• Share on Google+