背景图片调整大小以适应风景分辨率以及裁剪肖像分辨率

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; 

请勿设置宽度，高度或边距。