javascript - 幻灯片不接受固定高度

Question

我当前的带有脚本的幻灯片 CSS 似乎不接受图像的通用高度。正因为如此......当他们转换较小的图片时，它们看起来实际上部分显示在前一张图片上方(也就是你看到它下面的旧图片)。为什么我设置的高度值不起作用？我该如何解决这个问题？

CSS

/* For Slideshow */
/* the slide container with a fixed size */
.slides {
box-shadow: 0px 0px 6px black;
margin-left: 0; 
margin-right: 0;
width: 500px;
height: 200px;
postion: relative;
}

/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img { 
display: block;
position: absolute; 
transition: opacity 1s;
opacity: 0;
width: 100%;
}

/* the first image is the current slide. it's faded in. */
.slides img:first-child { 
z-index: 2; /* frontmost */
opacity: 1;
}

/* the last image is the previous slide. it's behind 
the current slide and it's faded over. */
.slides img:last-child {
z-index: 1; /* behind current slide */
opacity: 1;
}
.container {

margin-left: auto;  
margin-right: auto;
background-color: #B2D1E0;
width: 1000px;
height: 200px;
border-top: 3px solid black;
position: relative;
margin-bottom: 100px;
}

HTML

<script>

function nextSlide() {
        var q = function(sel) { return document.querySelector(sel); 

}   
        q(".slides").appendChild(q(".slides img:first-child"));
}
setInterval(nextSlide, 3000)

</script>

<div class = "container">

<div class="slides">
<img src="http://media02.hongkiat.com/programming-myth/programmer.jpg">
<img src="How-to-Hire-a-Software-Developer1.jpg">
<img src="info-tech-business.jpg">
<img src="IT-Outsourcing.jpg">
<img src="http://lorempixel.com/500/300/?r=5">
</div>
</div>

Answer 1

在幻灯片 img 中也添加高度。希望这会奏效

 .slides img { 
    display: block;
    position: absolute; 
    transition: opacity 1s;
    opacity: 0;
    width: 100%;
    height:200px;
    margin-top:0px;
    }