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

修改

给图像提供高度和宽度也是一种不好的做法。这将始终覆盖图像的纵横比并在某个方向上拉伸它。

将此用于img

div img {
    width: 100%;    
}

这将首先将分部50%表单置于顶部。即图像现在的最高部分位于页面高度的50%，然后translate属性将图像向上移动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设置负边距top（在调整大小时）：

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

垂直居中全屏图像

3 个答案: