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-repeat:no-repeat;
background-size:contain;
background-position:center;

不要设置宽度，高度或边距。

Answer 2

当您使用背景图像时，您的容器将成为需要进行大小调整的“窗口”。

您可以使用background-image

的媒体查询来交换orientation

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

From W3C

编辑：如果您使用的是插件，则可能是根据加载的图像设置内联高度值。

调整背景图像大小以适应景观分辨率以及裁剪纵向分辨率

2 个答案: