幻燈片將不會接受固定高度

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; 
    }