The object-fit property defines how an element responds to the height and width of its content box. It's intended for images, videos and other embeddable media formats in conjunction with the object-position property. Used by itself, object-fit lets us crop an inline image by giving us fine-grained control over how it squishes and stretches insi…

index.html

<div class="original-image">
<p>original image</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png"> 
</div>

<div class="image">
  <p>object-fit: fill</p>
<img class="object-fit_fill" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png">
</div>

<div class="image">
  <p>object-fit: contain</p>
<img class="object-fit_contain" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png">
</div>

<div class="image">
  <p>object-fit: cover</p>
<img class="object-fit_cover" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png">
</div>

<div class="image">
  <p>object-fit: none</p>
<img class="object-fit_none" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png">
</div>

<div class="image">
  <p>object-fit: scale-down</p>
<img class="object-fit_scale-down" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/image.png">
 </div>

style.css

.object-fit_fill { object-fit: fill }
.object-fit_contain { object-fit: contain }
.object-fit_cover { object-fit: cover }
.object-fit_none { object-fit: none }
.object-fit_scale-down { object-fit: scale-down }

html { 
  color: #eee; 
  padding: 30px;
  font-family: 'Source Code Pro', Monaco;
  background-color: #333;
}

p { font-weight: 200; font-size: 13px; margin-bottom: 10px; margin-top: 0;}

img { height: 120px; background-color: #444;}

img[class] { 
  width: 100%;
}

.original-image {
  margin-bottom: 50px;
}

.image {
  float: left;
  width: 40%;
  margin: 0 30px 20px 0;
  
  &:nth-child(2n) {
    clear: left;
  }
  
  &:nth-child(2n+1){
    margin-right: 0;
  }
}