填充屏幕，圖像，中心左到右的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%; 
}