<div class="container -column">
  <div class="holder">
    <div>object-fit: fill</div>
    <div class="element">
      <img src="https://unsplash.it/600/900?random" class="-fill">
    </div>
  </div>
  <div class="holder">
    <div>object-fit: contain</div>
    <div class="element">
      <img src="https://unsplash.it/600/900?random" class="-contain">
    </div>
  </div>
  <div class="holder">
    <div>object-fit: cover</div>
    <div class="element">
      <img src="https://unsplash.it/600/900?random" class="-cover">
    </div>
  </div>
</div>
.-fill {
  width: inherit;
  height: inherit;
  object-fit: fill;
}

.-cover {
  width: inherit;
  height: inherit;
  object-fit: cover;
}

.-contain {
  width: inherit;
  height: inherit;
  object-fit: contain;
}

.element {
  width: 300px;
  height: 200px;
  background-color: #333;
}

.holder {
  font-size: 20px;
  line-height: 1.5em;
  margin-bottom: 1em;
}

html, body {
  height: auto;
}
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css
  2. https://codepen.io/gregh/pen/jyNrJW.css

External JavaScript

This Pen doesn't use any external JavaScript resources.