object-fit

index.html

<div class="container">
  <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>

styles.scss

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
}
.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, body {
  height: 100%;
}
body { display: flex; }
.container {
  border: 3px solid blue;
  display: flex;
  flex: 1;
  align-items: stretch;
}

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

img {
  flex: 1;
  width: 100%;
  height: 100%;
}

.image {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}