使用object-fit时将绝对位置的图像垂直居中

Question

如何在使用object-fit: cover时将图像垂直居中？我希望图像始终是其容器宽度的100%，当容器的高度小于图像的高度时，图像的顶部和底部将被裁剪。默认情况下，object-fit: cover仅裁剪图像的底部。在下面的示例中，我希望图像的中心始终位于文本的正后方。

​

header {
  max-height: 20em;
  position:   relative;
}

h1 {
  position:   absolute;
  text-align: center;
  top:        0;
  transform:  translateY(-50%);
  width:      100%;
}

img {
  object-fit: cover;
  opacity:    0.2;
  z-index:    -1;
}

<header>
  <h1>Page Title</h1>
  <img src=https://upload.wikimedia.org/wikipedia/commons/9/92/Widdringtonia_whytei_Mulanje_Malawi.jpg>
</header>

​

Answer 1

查看MDN docs中的object-position。