垂直居中全屏图像

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

我的图像会被拉伸并在高度上变形以适应屏幕。

如果我这样定义我的图像 CSS（只是没有定义高度）：

div img {
    width: 100%;
}

我的图像不会拉伸/变形，但会从图像的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%);
}

编辑

同时给出图像的高度和宽度也是一种不好的做法。这将始终覆盖图像的纵横比并将其拉伸到某个方向。

将其用于图像

div img {
    width: 100%;    
}

这将首先将除法50% 置于顶部。即图像的最顶部现在将位于页面高度的50%，然后翻译属性会将图像向上移动其高度的50%，基本上使图像居中

Answer 2

这个怎么样：

div {
    position:fixed;
    top:0;
    left:0;
    width: 100px;
    height: 100px;
    border:1px solid red;
    text-align:center;
    line-height:100px;
    overflow:hidden;
}

img { 
    vertical-align:middle;
    border:1px solid black; 
}

<div>
    <img src="https://www.smallbusinesssaturdayuk.com/Images/Small-Business-Saturday-UK-Google-Plus.gif">
</div>

Answer 3

如果你允许js，你可以这样做（假设图像有id'img'）：

#img {
  width: 100%;
  position: absolute;
  top: 50%;
}

需要使用 js 或 jQuery 设置负边距顶部（调整大小时）：

$('#img').css('margin-top', '-'+($('#img').height()/2)+'px');