Question

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

JS FIDDLE

＆＃13;

$(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());
            });
        });
    });

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

尝试并提供反馈，如果这对您有用。

在图像顶部制作2个div，即全图像高度和50％宽度

1 个答案: