object-fit

< css‎ | properties
Jump to: navigation, search

object-fit

This article is Ready to Use.


W3C Candidate Recommendation

Summary

The object-fit property defines how content of a replaced element (e.g., a video or an image) is made to fit the dimensions of its containing box.

Overview table

Initial value fill
Applies to Replaced elements
Inherited No
Media visual
Computed value As specified
Animatable No
CSS Object Model Property objectFit

Syntax

  • !important: declaration
  • -ms-flex-pack: center
  • -ms-flex-pack: end
  • -ms-flex-pack: justify
  • -ms-flex-pack: start
  • align-content: center
  • align-content: flex-end
  • align-content: flex-start
  • align-content: space-around
  • align-content: space-between
  • align-content: stretch
  • align-items: baseline
  • align-items: center
  • align-items: flex-end
  • align-items: flex-start
  • align-items: stretch
  • align-self: auto
  • align-self: baseline
  • align-self: center
  • align-self: flex-end
  • align-self: flext-start
  • align-self: stretch
  • alignment-adjust: <length>
  • alignment-adjust: <percentage>
  • alignment-adjust: after-edge
  • alignment-adjust: alphabetic
  • alignment-adjust: auto
  • alignment-adjust: baseline
  • alignment-adjust: before-edge
  • alignment-adjust: central
  • alignment-adjust: hanging
  • alignment-adjust: ideographic
  • alignment-adjust: mathematical
  • alignment-adjust: middle
  • alignment-adjust: text-after-edge
  • alignment-adjust: text-before-edge
  • all-space-treatment: collapse
  • all-space-treatment: preserve
  • animation-delay: <time>
  • animation-direction: alternate
  • animation-direction: alternate-reverse
  • animation-direction: normal
  • animation-direction: reverse
  • animation-duration: <time>
  • animation-fill-mode: backwards
  • animation-fill-mode: both
  • animation-fill-mode: forwards
  • animation-fill-mode: none
  • animation-iteration-count: <single-animation-iteration-count>
  • animation-iteration-count: infinite
  • ... further results


Values

fill
The replaced content is sized to fill the element's 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
Size the content as if ‘none’ or ‘contain’ were specified, whichever would result in a smaller concrete object size

Compatibility


Examples

Five simple img elements.

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Object-fit example</title>
  <link href="content-fit.css" type="text/css" rel="stylesheet">
</head>
<body>

  <img src="http://www.webplatform.org/logo/wplogo_pillow_wide_tan.png" 
      alt="Webplatform Logo" class="fill"/>
  <img src="http://www.webplatform.org/logo/wplogo_pillow_wide_tan.png" 
      alt="Webplatform Logo" class="contain"/>
  <img src="http://www.webplatform.org/logo/wplogo_pillow_wide_tan.png" 
      alt="Webplatform Logo" class="cover"/>
  <img src="http://www.webplatform.org/logo/wplogo_pillow_wide_tan.png" 
      alt="Webplatform Logo" class="none"/>
  <img src="http://www.webplatform.org/logo/wplogo_pillow_wide_tan.png" 
      alt="Webplatform Logo" class="scale-down"/>

</body>
</html>

View live exampleAll five images are forced to 150x100 pixels, different from both the original size of the image (196x77 pixel) and its aspect ratio.

CSS

img {
  float: left;
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  margin-right: 1em;
}
.fill {
  object-fit: fill;
  /**
    * This is the default behaviour.
    * The image is forced to fill the whole box, 
    * the aspect ratio is ignored. 
    **/
}
.contain {
  object-fit: contain;
  /**
    * The whole image will be displayed in the box 
    * and scaled down or expanded if necessary.
    * The aspect ratio is maintained. 
    **/
}
.cover {
  object-fit: cover;
  /**
    * The whole image is scaled down or expanded till 
    * it fills the box completely, the aspect ratio is 
    * maintained. This normally results in only part of
    * the image being visible. 
    **/
}
.none {
  object-fit: none;
  /**
    * The image keeps it's original size. 
    * This may result in not filling the box 
    * completely or sticking out of it. 
    **/
}
.scale-down {
  object-fit: scale-down;
  /**
    * The result of 'none' and 'contain' is compared
    * and the smaller concrete object is displayed. 
   **/
}



Related specifications

Specification Status Related Changes
CSS Image Values and Replaced Content Module Level 3 W3C Candidate Recommendation

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 32
Unsupported
Unsupported
≥ 10.6 ≤12.1, 18+ -o
Unsupported

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic Support Unsupported
Unsupported
Unsupported
Unsupported
Unsupported
≥ 11 ≤12.1 -o
Unsupported
Unsupported

The given value was not understood.

Compatibility notes

Browser Version Note
Opera 18+ The feature can be enabled through experimental web features flag from 18+

See also

Related articles

The given value was not understood.

Generated and Replaced Content








  • object-fit

The given value was not understood.

Multimedia








  • object-fit







The given value was not understood.

Video





  • object-fit






The given value was not understood.