背景圖片調整大小以適應風景分辨率以及裁剪肖像分辨率

Question

是否可以根據屏幕分辨率是縱向還是橫向調整背景圖片的大小？

例如，我有什麼，我想實現的圖像：image

還有的在這個網站上的例子：Cuberto。滾動到工作頁面並調整窗口大小。他們正在使用視頻。但是，這是我希望達到的預期效果。

HTML：

<div class="slide" id="slide3"></div 

CSS：

#slide3{ 
background-image: url(/images/3.jpg)no-repeat center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
background-attachment: fixed;} 

我無法得到它的工作。

Answer 1

當你使用背景圖像時，你的容器將成爲需要調整大小的'窗口'。

可以交換background-image使用媒體查詢orientation

@media all and (orientation:portrait) { … } 
@media all and (orientation:landscape) { … } 

From W3C

編輯：如果您使用的是插件，這可能是設置基於關閉加載的圖像內嵌高度值。

Answer 2

background-repeat:no-repeat; 
background-size:contain; 
background-position:center; 

請勿設置寬度，高度或邊距。