Bests fit for a centered child image which parent container dimensions are unknown?

How do I achieve the best fit for a vertically and horizontally centered image which parent container dimensions are unknown?

See the below layouts (codepen for reference):

The child image fits its parent container as expected when at least one dimension of the child exceeds one dimension of the parent, but I cannot get the image to stretch and fill the parent when the image is smaller in both dimensions than its container (see 150x150 and 150x50 cases).

Hod do I achieve best fit for all cases using CSS only?

My css for reference (see link to codepen above):

.parent {
  position: relative;
  background: gray;

  display: inline-block;
}
.square {
  width: 200px;
  height: 200px;
}
.tall {
  width: 200px;
  height: 300px;
}
.wide {
  width: 300px;
  height: 200px;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

from Recent Questions - Stack Overflow https://ift.tt/3gJ6aCI
https://ift.tt/3BqCYIJ