一笙以、問(wèn)題情景
很多時(shí)候盒子都是被圖片撐起來(lái)的，當(dāng)圖片失效或者還沒(méi)加載出來(lái)的時(shí)候冻辩，很有可能會(huì)影響樣式猖腕。
比如下面這組布局拆祈，看起來(lái)很和諧，但是當(dāng)一張圖片加載不出的時(shí)候倘感，就會(huì)出現(xiàn)文字被移動(dòng)上去的樣式問(wèn)題放坏，很影響效果，如何才能在這種情況下把上面留白占位呢老玛？
正常
異常
布局：
<ul>
<li>
<div><img src="123.jpg" alt=""></div>
<p>1</p>
</li>
<li>
<div><img src="123.jpg" alt=""></div>
<p>2</p>
</li>
<li>
<div><img src="123.jpg" alt=""></div>
<p>3</p>
</li>
</ul>
二淤年、解決方案
最簡(jiǎn)單的直接給盒子先加上高度？但是現(xiàn)在的開(kāi)發(fā)中通常需要自適應(yīng)蜡豹，元素寬度均根據(jù)頁(yè)面變化而變化麸粮，所以圖片的寬高也會(huì)按比例變化，在圖片盒子上先設(shè)置高度也是不可取的镜廉。
于是嘗試以下辦法可解決：
首先我們可以確定這組圖片的寬高比弄诲，這組圖片的高度是寬度的72%左右。
css：
div{
position: relative;
padding-top:72%; // (你的圖片的高度/寬度值)
}
img{
position: absolute;
top:0;
right:0;
width:100%;
}
結(jié)果
可以看到問(wèn)題順利解決了娇唯，思路就是用padding撐起圖片div的高度齐遵，保證里面無(wú)論有沒(méi)有圖片都不會(huì)塌陷，但是padding會(huì)擠掉正常的圖片塔插，所以我們可以使圖片相對(duì)于圖片盒子進(jìn)行絕對(duì)定位梗摇，定位到左上角，就OK了想许。
