Currently, I am in the process of constructing a small website that includes a slideshow beneath my navigation bar. My aim is to utilize flexbox while making the slideshow "responsive." By this, I mean that when altering the dimensions of my browser window, only the width of the div should adjust, not the height. Here is the setup of my slideshow:
<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/
Despite my attempts at using flexbox, I haven't been able to pinpoint the issue with the divs and images.