背景大小：封面正在切斷我的大屏幕上的圖像

我有我鋪設的網站。它基本上是Header，Content和Footer，全部寬度都是100％。我想讓背景圖像填充內容部分的屏幕。我用CSS3 background-size：cover實現了這一點。當Im放大到2560px的屏幕時，唯一的問題是圖像被切斷。有沒有辦法解決這個問題，這樣就不會發生？背景大小：封面正在切斷我的大屏幕上的圖像

我的CSS

#maincontentcontainer { 
    width: 100%; 
    background-image: url(../images/sandpiperBG.jpg); 
    background-position:center center; 
    background-repeat:no-repeat; 
    -moz-background-size:cover; 
    -webkit-background-size:cover; 
    background-size:cover; 
}

來源

2014-02-05 Greg

http://stackoverflow.com/search?q=responsive+background+image –

如果您希望圖片始終填滿屏幕「封面」是要走的路，但瀏覽器可能需要按順序裁剪要做到這一點，並保持寬高比。你可以發佈一個鏈接到演示頁面嗎？ –

這裏是一個鏈接謝謝http://www.gregtaylordesignstudio.com/sandpiperbeach/responsive.html – Greg

-moz-background-size: 100% 100%; 
-webkit-background-size: 100% 100%; 
background-size: 100% 100%;

將修復它，但圖像會顯得捉襟見肘/壓扁，因爲你有一個固定的高度，但寬度可變。

來源

2014-02-05 17:18:14 Samih

對。感謝您的建議，但這不適合我，因爲延伸 – Greg

@Greg然後您可以選擇使用媒體查詢。請參閱http://css-tricks.com/css-media-queries/。您可以檢測屏幕寬度並改變元素的高度以爲圖像留出更多空間，也可以加載與正在查看的屏幕高寬比相匹配的不同大小的圖像。當前固定的高度意味着容器寬高比，但是您正試圖在其內部固定長寬比的圖像。希望有所幫助。 – Samih

背景大小：封面正在切斷我的大屏幕上的圖像

回答

相關問題