css - 在加载图像时使 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% */
}