圖片加載防止窗口抖動，又可以等比例縮放
阿新 • • 發佈：2018-08-06
窗口 head width 方法 wid nbsp image ima add 由於html加載最後才會加載圖片,所以如果沒有提前設置高度的話,就會出現窗口抖動,用戶體驗很不好.
如果固定死高度的話，又不能於寬等比例縮放。
解決辦法:
已知原圖的寬高比例
例如:此圖寬500,高321,高/寬為64.2%
方法一:
不考慮兼容性(即手機端開發):
直接設置height: 64.2vw;,意思是高度設置為視窗寬度的64.2%
<style> .img-content{ width: 100%; height: 64.2vw; overflow: hidden; } img{ width: 100%; } </style> </head> <body> <div class="img-content"> <img src="./hai.jpg" alt=""> </div> <div>text</div> </body>
方法二
.img-content{ width: 100%; height: 0; overflow: hidden; padding-bottom: 64.2%; } img{ width: 100%; } </style> </head> <body> <div class="img-content"><img src="./hai.jpg" alt=""> </div> <div>text</div> </body>
由於padding的大小是根據父級元素的寬來規定大小，所以上面設置padding-bottom為64.5%是相對於整個body寬度（100%），又因為默認box-sizing為content-box，所以寬高是元素本身的寬高，設置了高度為零，高度就由padding-bottom撐開。
題外：
由第二種方法可以聯想到我們要做一個正方形，要怎麽實現
width: 30%;padding-top: 30%;height: 0; width的比例等於padding-top的比例即可圖片加載防止窗口抖動，又可以等比例縮放