Question

我有一个完全用CSS制作的横幅滑块。这是jsfiddle：http://jsfiddle.net/mPH4H/63/ 我正在尝试在缩放浏览器时强制div'滑块'的高度调整大小。我知道它目前设置为500px但自动高度不起作用。边界只是为了显示div轮廓。我认为问题在于容器的相对位置与其他div的绝对位置之间的关系，但我无法弄明白。

如果这是一个愚蠢的问题，我很抱歉。作为初学者，我很难找到解决方案。任何帮助都将受到高度赞赏。

HTML：

<div class='slider'>
<div class='Bslide1'></div>
<div class='Bslide2'></div>
<div class='Bslide3'></div>
</div>

CSS：

.slider {
max-width: 1920px;
height: 500px;
margin: 0 auto;
border-style: solid;
border-width: 5px;
border-color: tomato;
position: relative;
}

.Bslide1,.Bslide2,.Bslide3,.Bslide4,.Bslide5 {
position: absolute;
width: 100%;
height: 100%;

}
.Bslide1 {
background: url(image1.png)no-repeat center;
background-size: contain;
animation:fade 8s infinite;
-webkit-animation:fade 8s infinite;
} 
.Bslide2 {
background: url(image2.png)no-repeat center;
background-size: contain;
animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}
.Bslide3 {
background: url(image3.png)no-repeat center;
background-size: contain;
animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;
}
@keyframes fade
{
0%   {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}
@keyframes fade2
{
0%   {opacity:0}
33.333% { opacity: 1}
66.666% { opacity: 0 }
100% { opacity: 0}
}
@keyframes fade3
{
0%   {opacity:0}
33.333% { opacity: 0}
66.666% { opacity: 1}
100% { opacity: 0}
}

Answer 1

你应该使用vh代替px作为滑块的高度

.slider {
max-width: 1920px;
height: 60vh;
margin: 0 auto;
border-style: solid;
border-width: 5px;
border-color: tomato;
position: relative;
}

.Bslide2 {
background: url(image2.png)no-repeat center;
top: 60vh;
background-size: contain;
animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;
}

Div自动高度不起作用 - CSS

1 个答案: