object-fit

index.html

<h1><a href="//developer.mozilla.org/en-US/docs/Web/CSS/object-fit">object-fit</a></h1>

<h2>(original image)</h2>
<img src="//goo.gl/njQhWF" alt="Pier">

<h2>fill</h2>
<img class="object-fit_fill" src="//goo.gl/njQhWF" alt="Pier">

<h2>contain</h2>
<img class="object-fit_contain" src="//goo.gl/njQhWF" alt="Pier">

<h2>cover</h2>
<img class="object-fit_cover" src="//goo.gl/njQhWF" alt="Pier">

<h2>none</h2>
<img class="object-fit_none" src="//goo.gl/njQhWF" alt="Pier">

<h2>scale-down</h2>
<img class="object-fit_scale-down" src="//goo.gl/njQhWF" alt="Pier">

object-fit.markdown

object-fit

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Medium article describing a use case for object-fit: cover: https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

Differences between contain and scale-down: http://codepen.io/chrisnager/pen/XJgJqN?editors=110

A Pen by Chris Nager on CodePen.

License.

style.css

html, a { color: #333 }
html { font-family: "Open Sans", sans-serif }
a { text-decoration: none }
h1 { font-weight: 300 }
h2 { font-weight: 600 }
img { height: 150px; background-color: #ddd }
img[class] { width: 150px }

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