슬라이드 쇼 - 이미지가 div의 범위에 있음

Question

내 탐색 막대 아래에 슬라이드 쇼가있는 웹 사이트를 만들고 flexbox를 실험하고 있습니다.

그래서이 슬라이드 쇼는 브라우저의 너비와 높이를 수정할 때 div의 너비가 증가 할뿐 (높이가 아님)이 슬라이드 쇼가 "반응 적"이길 원합니다. 이것은 나의 슬라이드 쇼의 구조 :

<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