CSS object-fit

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

Mozilla Hacks – Exploring object-fit →
Mozilla Developer Network: object-fit →