幻灯片 - 图像格外

Question

我试图用我的导航栏下的幻灯片来创建一个小网站，并试验flexbox。

所以我想这个幻灯片放映是“响应”，在我修改我的浏览器宽度和高度只有div的宽度增加（而不是heigth）的意义上。这是我的幻灯片的结构：

<div class="slideshow"> 
    <ul> 
     <li><img src="http://placehold.it/1901x630"></li> 
     <li><img src="http://placehold.it/1902x630"></li> 
     <li><img src="http://placehold.it/1903x630"></li> 
     <li><img src="http://placehold.it/1904x630"></li> 
     <li><img src="http://placehold.it/1905x630"></li> 
    </ul> 
</div> 

.slideshow{ 
background-color: firebrick; 
height: 350px; 
} 

.slideshow ul{ 
position: relative; 
} 

.slideshow ul li{ 
opacity:0; 
position: absolute; 
} 

https://jsfiddle.net/7j5zpx14/1/

我一直在使用Flexbox的尝试，但我也没弄明白什么是错与此的div和图像。

Answer 1

您只CAD下面img标签，看到CSS Fiddle Demo

的CSS：

.slideshow img { 
    float: left; 
    height: 350px; 
    width: 100%; 
} 

看到Fiddle Demo Link