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.

  • Initial valuefill
  • Applies toReplaced elements
  • InheritedNo
  • MediaVisual
  • Computed valueSpecified value
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.objectFit
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;
}
?Firefox?Explorer?Chrome?Safari?Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.