slick carousel 在服务器上有 1px 高度,本地环境 100%
slick carousel has a 1px height on server, local environment 100%
我正在使用 slick carousel。我希望背景-url 的高度为 100%
这是我的旋转木马
http://jsfiddle.net/84c8gvkt/3/
HTML:
<section>
<div class="carousel-container">
<div class="fill" style="background-image:url('http://media-cdn.tripadvisor.com/media/photo-s/01/a4/e9/fa/los-perdidos-hot-springs.jpg');"> </div>
<div class="slide" style="background-image:url('http://media-cdn.tripadvisor.com/media/photo-s/01/a4/e9/fa/los-perdidos-hot-springs.jpg');"> </div>
</div>
JS:
$('.carousel-container').slick({
dots: true,
infinite: true,
speed: 3000,
fade: true,
cssEase: 'linear',
autoplay: false,
pauseOnHover: true,
});
CSS
html, body {
width: 100%;
height: 100%;
}
.fill {
padding: 0px;
width:100%;
height:100%;
background-position:center;
background-size:cover;
}
.fill:after {
content: '';
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.3);
}
我不知道哪里出了问题。
你能帮帮我吗?谢谢!
问题似乎是因为您的 section
或 .carousel-container
的高度都不是 100%,您的 slick carousel 生成的任何元素也没有。
简单的解决方法就是在 .fill
元素上使用视口单位而不是百分比。
尝试进行以下更改:
.fill {
height: 100vh;
}
vh
单元在所有浏览器中都得到了很好的支持。 Can I use
这可能不一定是实现您想要实现的目标的最佳方法,只是一个建议。
我正在使用 slick carousel。我希望背景-url 的高度为 100%
这是我的旋转木马 http://jsfiddle.net/84c8gvkt/3/
HTML:
<section>
<div class="carousel-container">
<div class="fill" style="background-image:url('http://media-cdn.tripadvisor.com/media/photo-s/01/a4/e9/fa/los-perdidos-hot-springs.jpg');"> </div>
<div class="slide" style="background-image:url('http://media-cdn.tripadvisor.com/media/photo-s/01/a4/e9/fa/los-perdidos-hot-springs.jpg');"> </div>
</div>
JS:
$('.carousel-container').slick({
dots: true,
infinite: true,
speed: 3000,
fade: true,
cssEase: 'linear',
autoplay: false,
pauseOnHover: true,
});
CSS
html, body {
width: 100%;
height: 100%;
}
.fill {
padding: 0px;
width:100%;
height:100%;
background-position:center;
background-size:cover;
}
.fill:after {
content: '';
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.3);
}
我不知道哪里出了问题。
你能帮帮我吗?谢谢!
问题似乎是因为您的 section
或 .carousel-container
的高度都不是 100%,您的 slick carousel 生成的任何元素也没有。
简单的解决方法就是在 .fill
元素上使用视口单位而不是百分比。
尝试进行以下更改:
.fill {
height: 100vh;
}
vh
单元在所有浏览器中都得到了很好的支持。 Can I use
这可能不一定是实现您想要实现的目标的最佳方法,只是一个建议。