在图像加载时使div具有图像高度。 （避免重画）

Question

浏览器首先加载高度为0的div， 并且只有在使高度等于图像高度之后。 以下是截屏：https://puu.sh/vR0Gp/10233ce94d.png

我想从头开始将高度作为图像高度，以避免重绘。 这是页面：http://a4004cc1.ngrok.io/banner1.html

横幅的HTML：

<div class="home-top-box">
    <div class="banner">
        <img src="mobile-main.jpg" width="750" height="500">
    </div>
</div>

横幅的css：

.home-top-box .banner{
    position:relative;
    height:auto;
    width:100%;
    display: inline-block;
}

.home-top-box .banner img{
    width:100%;
}

尝试使用最小高度将高度更改为100％ - 那些仍未解决问题。

Answer 1

尝试更改此设置，以便父级具有与图像宽高比匹配的内部填充。 http://i.imgur.com/2viiD35.png http://i.imgur.com/7k8uszJ.png

.home-top-box .banner {
    position: relative;
    height: 0;
    /* width: 100%; */
    /* display: inline-block; */
    padding-bottom: 66.6%; /* (500 / 750) * 100 = 66.6% */
}

Answer 2

如果你知道图像宽高比，那么你可以使用jQuery重新计算你的身高：

$.ready(function(){
    $("div.banner").height($("div.banner").width()/750*500);
});

你应该考虑一些填充，边距和边框，或者尽可能使它们为零。