<h1>
  <code>object-fit</code> and
  <code>object-position</code>
</h1>
<p>
  All the flexibility of <code>background-position</code> and <code>background-size</code>, now  available to <code>&lt;img></code>!
</p>
<p>
  Available for testing in Chrome (since v31) and Firefox Beta (v36).
</p>
<div>
  <img src="http://placekitten.com/800/400">
  <pre>
    // shared styles
    // src image is 800x400
    height: 160px;
    width: 160px;
  </pre>
</div>
<div>
  <img class="cover" src="http://placekitten.com/800/400">
  <pre>
    object-fit: cover;
  </pre>
</div>
<div>
  <img class="cover topleft" src="http://placekitten.com/800/400">
  <pre>
    object-fit: cover;
    object-position: top left;
  </pre>
</div>
<div>
  <img class="cover bottomright" src="http://placekitten.com/800/400">
  <pre>
    object-fit: cover;
    object-position: bottom right;
  </pre>
</div>
<div>
  <img class="none" src="http://placekitten.com/800/400">
  <pre>
    object-fit: none
  </pre>
</div>
<div>
  <img class="none topleft" src="http://placekitten.com/800/400">
  <pre>
    object-fit: none;
    object-position: top left;
  </pre>
</div>
<div>
  <img class="none bottomright" src="http://placekitten.com/800/400">
  <pre>
    object-fit: none;
    object-position: bottom right;
  </pre>
</div>
<div>
  <img class="contain" src="http://placekitten.com/800/400">
  <pre>
    object-fit: contain;
  </pre>
</div>
<div>
  <img class="contain topleft" src="http://placekitten.com/800/400">
  <pre>
    object-fit: contain;
    object-position: top left;
  </pre>
</div>
<div>
  <img class="contain bottomright" src="http://placekitten.com/800/400">
  <pre>
    object-fit: contain;
    object-position: bottom right;
  </pre>
</div>

img {
  height: 160px;
  width: 160px;
  border: 1px solid black;
}
.cover {
  object-fit: cover;
}
.contain {
  object-fit: contain;
}
.none {
  object-fit: none;
}
.topleft {
  object-position: top left;
}
.bottomright {
  object-position: bottom right;
}

pre, img {
  display: inline-block;
  vertical-align: middle;
}
div {
  clear: left;
  margin-bottom: 1em;
}