显示带有背景大小的完整图像（高度）：封面

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% 而不是使用 auto。