在整个图像高度和50％宽度的图像上方进行2格划分

Question

Please please please help. I have a full width image slideshow, and I'm trying to have one div on the left which is 50% of the image width and 100% image height, and another div on the right that is 50% of the image width and 100% image height. I can easily get the width properly, but I can't get the divs to cover the full image height, especially when i resize.

JS FIDDLE

 $(document).ready(function() { $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function(){ $('.fadein :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.fadein');}, 4000); }); $(function () { $('.fadein img:gt(0)').hide(); $('.nextButton').on('click', function () { $('.fadein :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.fadein'); }); $('.previousButton').on('click', function () { $('.fadein :last-child').fadeIn() .insertBefore($('.fadein :first-child').fadeOut()); }); }); }); 

 body, html{ margin:0; padding:0; } .fadein { position:relative; width:100%; height:auto; } .fadein img { position:absolute; width: 100%; height: auto; } #slideshow{ position: relative; height: 200px; border: dashed pink; } #previous{ width:50%; height:100%; top:0; left:0; border:solid blue; position:absolute; } #next { width:50%; height:100%; border:solid green; position:absolute; top:0; right:0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id ="slideshow"> <div class="fadein"> <img src="http://www.planwallpaper.com/static/images/518169-backgrounds.jpg"> <img src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"> <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"> </div> <div id="previous" class="previousButton"></div> <div id="next" class="nextButton"></div> </div> 

Answer 1

I have updated your code in fiddle check it .
height:100vh; https://jsfiddle.net/ay5802hb/

Try it and give feedback if this works for you.