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

Question

如果我用图像填充屏幕，请执行以下操作：

width:auto;
height:100%;

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

是否可以让图像浮在屏幕中心？左右两侧是否同样被裁掉？我需要一个负余量左边的东西，但是因为我不知道要做多少像素，不确定这是否可能？

谢谢！

Answer 1

要在屏幕中居中未知的偏移宽度，您可以使用位于页面中心的包装绝对div。

然后，将图像absoluted设置为其父包装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%;
}