显示背景尺寸的完整图像(高度):封面

时间:2016-05-07 16:47:19

标签: html css parallax background-size stellar.js

我正在使用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)以显示所有图像?

2 个答案:

答案 0 :(得分:1)

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

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

#slide1 {
  min-height: 600px;
}

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

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

答案 1 :(得分:0)

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