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的高度始终设置为高于{/ 1>}的高度。这可能是什么原因？

如果这是相关的：我对.image1函数使用相同的代码。它在那里工作得很好。因此，当我重新加载页面，然后调整大小时，额外的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>

Answer 2

尝试将box-sizing属性添加到.slidercontainer css

.first .slidercontainer{
    .....
    box-sizing: border-box;
}

请告诉我这是否可以帮助您;）

jQuery load（）函数表现得很奇怪

2 个答案: