【CSS】当图片加载缓慢时,图片如何自适应高度
生活随笔
收集整理的這篇文章主要介紹了
【CSS】当图片加载缓慢时,图片如何自适应高度
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、問題:
圖片在加載成功前,包裹圖片的div沒有被撐開,導致整體布局難看,產生頁面“閃爍”的現象。
2、解決:
設置容器的padding-top / padding-bottom為百分比 ,
當margin/padding取形式為百分比的值時,都是以父元素的width為參照。
#container {width: 50%; //父元素寬度的一半background-color: red; //僅為了方便演示 } .placeholder {padding-top: 50%; //與width: 50%;的值保持一致,也就是相當于父元素寬度的一半。 } <div id="container" class="placeholder"></div>?
轉載于:https://www.cnblogs.com/cindy2035/p/10436879.html
總結
以上是生活随笔為你收集整理的【CSS】当图片加载缓慢时,图片如何自适应高度的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: MySql 5.6.36 64位绿色版安
- 下一篇: 20165307《网络对抗技术》Exp1