jQuery load() 函数表现异常

Question

我试图将父元素的高度设置为等于子元素(图像)的高度。为此，我使用以下代码:

HTML

<section class="first">
    <div class="slidercontainer">
        <img src="images/1.jpg" alt="image1" class="image1">
        <img src="images/2.jpg" alt="image2" class="image2">
        <img src="images/3.jpg" alt="image3" class="image3">
        <img src="images/4.jpg" alt="image4" class="image4">
    </div>
</section>

CSS

.first{
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
}

.first .slidercontainer{
    position: relative;
    margin: 0px auto;
    overflow: hidden;
    width: 80%;
    //border: 1px solid black;
    background-color: red;
}

.first .slidercontainer img{
    position: absolute;
    top: 0px;
    max-width: 100%;
}

.image1{
    left: 0px;
}

.image2{
    left: 100%;
}

.image3{
    left: 200%;
}

.image4{
    left: 300%;
}

jQuery

var sliderImage = $(".first .slidercontainer img:nth-child(1)");
$(sliderImage).load(function(){
    var sliderHeight = sliderImage.height();
    $(".slidercontainer").height(sliderHeight);
});

我正在使用 load() 函数，因为 .slidercontainer 的高度只能在 .image1 加载后设置。

这几乎 工作正常。我遇到的问题是 .slidercontainer 的高度总是设置为 9px 大于 .image1 的高度。这可能是什么原因？

如果这是相关的:我对 resize() 函数使用相同的代码。它在那里工作得很好。所以当我重新加载页面，然后调整它的大小时，多余的 9px 就消失了。

Answer 1

尝试使用 .css 给出大小

<script type="text/javascript">
    $(".slidercontainer img").each(function(){

        $(this).on('load',function(){
            $height=$(this).height();
            $(".slidercontainer").css('height',$height);
        });
        //alert($height);

    });
</script>