html - 垂直居中全屏图像

Question

我想将全屏图像垂直居中。 我无法在 CSS 中定义图像，因为图像取决于 URL 参数。

<div>
    <img src="photo.jpg">
</div>

div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

如果我这样定义图像 CSS:

div img {
    width: 100%;
    height: 100%;
}

我的图像将拉伸(stretch)并在高度上变形以适应屏幕。

如果我像这样定义图像 CSS(只是没有定义高度):

div img {
    width: 100%;
}

我的图像不会拉伸(stretch)/变形，但会从图像的 top: 0 开始。我想要的是图像垂直居中并隐藏其高度的溢出。

基本上，我想要在背景居中的 CSS 中获得相同的行为:

background: url(photo.jpg) no-repeat center;
background-size: cover;

编辑:我忘了提到 CSS object-fit: cover 可以解决这个问题，但我正在寻找一个更跨浏览器的解决方案，因为这个属性没有适用于所有浏览器。

Answer 1

试试这个 CSS

div {
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

编辑

同时给图像赋予高度和宽度也是一种不好的做法。这将始终覆盖图像的纵横比并在某个方向拉伸(stretch)它。

将其用于 img

div img {
    width: 100%;    
}

这将首先将分区 50% 置于顶部。也就是说，图像的最顶端部分现在位于页面高度的 50% 处，然后 translate 属性会将图像向上移动其高度的 50%，基本上使图像居中