object fit property

by danield770

HTML

<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"/>
<p style="clear:both">
(see 
http://docs.webplatform.org/wiki/css/properties/object-fit  and 
http://caniuse.com/object-fit
)
</p>

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. 
   **/
}