Question

我正在使用stellar.js编写一个带有视差的html页面。在CSS中我使用：

html, body {height: 100%;}

#slide1 {
height: auto;
background-image:url('../images/1.jpg');
background-color:#fff;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed; }

但图像被剪切，图像底部不可见。

是否可以设置部分的高度（＃slide1）以显示所有图像？

Answer 1

使用background-size:cover;将始终垂直或水平裁剪背景图像，除非元素具有与图像完全相同的h / w比率。关键是选择和定位背景，使其在切割时仍然看起来很好。

最有可能的是，你想给你的元素min-height，例如：

#slide1 {
  min-height: 600px;
}

请记住，最受欢迎的桌面比率为16：9，大多数移动设备都是垂直保留的。如有必要，请对不同的设备/视口宽度使用@media查询。

如果您不希望幻灯片的高度高于视口高度（deviceScreen |浏览器高度），请将max-height: 100vh!important;添加到上述规则（在移动设备上有用）。

Answer 2

尝试将＃slide1 height属性设置为100％而不是使用自动。

显示背景尺寸的完整图像（高度）：封面

2 个答案: