將圖像裁剪成與屏幕大小和中心對齊的圖像

Question

我有一個圖像沿着我的網站寬度運行。它包含在寬度設置爲100％的div中。圖像本身的寬度是2560像素。

我希望圖像的寬度與瀏覽器視圖中的頁面寬度相同，因爲它使頁面變長。

簡單地將圖像的寬度設置爲100％具有使其更小和不成比例的效果。

搜索建議可能將max-width設置爲100％，但這隻會關閉圖像的結尾。

有沒有辦法維持中心對齊，即裁剪圖像的兩端，使它始終保持居中？

非常感謝。

Answer 1

您應該使用background-image來設置它。

這將讓你輕鬆中心，它就像這樣：

body{ 
background: url("path/to/image") no-repeat fixed center top; 
} 

center - 圖像居中

top - 垂直調整圖像

no-repeat - 確保背景不重複

fixed - 隨着你滾動

你可能不希望所有這些屬性，你正在尋找的是中心。

Answer 2

我什麼事你正在尋找的是：

http://jsfiddle.net/promatik/hFsYv/

HTML：

<div id="bg-div"></div> 

CSS：

#bg-div { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background-repeat: no-repeat; 
    background-attachment:fixed; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

這將把背景放在div的中心，並以最好的方式裁剪以填充div。