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

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;

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