在全图像高度和 50% 宽度的图像顶部制作 2 个 div

Question

请帮忙。我有一个全宽图像幻灯片，我试图在左边有一个 div，它是图像宽度的 50% 和 100% 图像高度，另一个 div 在右边是图像宽度的 50% 和 100 % 图像高度。我可以轻松获得正确的宽度，但我无法让 div 覆盖整个图像高度，尤其是在我调整大小时。

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

我已经更新了你的代码，检查一下。
height:100vh;https://jsfiddle.net/ay5802hb/

试一试，如果这对您有用，请提供反馈。