Question

我正在尝试将div（intro-text）放在另一个div（intro-container）中。我使用css和jQuery来做到这一点。

.intro-text {
width: 35%;
margin-left: auto;
margin-right: auto;
display: block;
}

在div（介绍文本）中，有一个响应宽度/高度的图像。它的宽度为父容器（intro-container）的35％。

我需要intro-text div的高度来将它放在容器中。它工作正常，除了第一次加载。它返回40px（文本的高度）。

$(document).ready(function(){

        backgroundResize();

        $(window).resize(function(){
            backgroundResize();
        });
    });

function backgroundResize(){
console.log("height:" + $(".intro-text").height());
}

似乎图像尚未加载，因此返回错误的值。即使准备好使用文档..如何解决此问题？

<div class="intro-container container">
    <div class="intro-text">
  <p><img src="intro.png"><br>
Address, Phone, .</p>
    </div>
</div>

Answer 1

就绪事件发生在加载HTML文档之后，而onload事件发生在稍后，所有内容（例如图像）也已加载。

在onload事件中调用backgroundResize（）函数。

    $(document).ready(function(){

            $(window).resize(function(){
                backgroundResize();
            });

            $(window).load(function(){
                backgroundResize();
            });

        });

通过响应式图像获取容器的高度

1 个答案: