css - 如何缩放居中的图像以填充其父级？

Question

当父容器尺寸未知时，如何调整居中图像的大小/缩放以填充其父容器？

无需裁剪或拉伸，只需调整大小或缩放直到图像填充其父宽度或高度。

请参阅以下布局（codepen供参考）：

当子图像的至少一维超过父容器的一维时，子图像按预期适合其父容器，但是当图像在两个维度上都小于其容器时，我无法让图像拉伸并填充父容器（参见 150x150和 150x50 箱）。

对于仅使用 CSS 的所有情况，我是否可以实现图像填充其父级？

我的 css 供参考（请参阅上面的 codepen 链接）：

.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%;
}

标签： css