css - 用图像填充屏幕，用 CSS 从左到右居中

Question

如果我用图像填充屏幕，如下所示:

width:auto;
height:100%;

垂直填满屏幕，水平几乎填满所有屏幕。但是，它也会从右侧裁剪图像。

是否可以让图像 float 在屏幕中央？这样左右两侧都被平等地裁掉了吗？我需要一个负的 margin-left 之类的东西，但是因为我不知道有多少像素可以做到这一点，所以不确定这是否可能？

谢谢!

Answer 1

为了在屏幕中居中一个未知的偏移宽度，您可以使用一个包装器绝对 div，放置在页面的中心。

然后，将图像绝对定位在其父包装器 div 的 -50% 处。无论宽度如何，它将完美地位于中间，保持图像的比例。

<div id="imagewrapper">
    <img src="" id="image" />
</div>

#imagewrapper {
    position: absolute;
    height: 100%;
    top: 0;
    left: 50%;
}

#image {
    position: absolute;
    height: 100%;
    width: auto;
    left: -50%;
}