頁面佈局
阿新 • • 發佈：2020-07-31
1、padding-bottom實現等比例縮放
原理：
1、父元素設定定位為相對定位（position: relative）
2、子元素設定定位為絕對定位（position: absolute）
3、父元素padding-bottom值為百分比時以父元素為參考，正方形時同父元素一樣的百分比。
4、子元素的絕對定位會脫離文件流，設定其width、height為100%則會同父元素保持一樣的比例。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <metaname="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale-1" /> <title>padding-bottom實現寬高等比縮放</title> <style> .imgItem { position: relative;width: 50%;padding-bottom: 50%;margin: 20px auto; } .imgItem div { position: absolute;z-index: 3; width: 100%;height: 100%; } img { width: 100%;height: 100%;object-fit: cover; } </style> </head> <body> <div class="imgItem"> <div><img src="http://img.cgypt.com/goods/2020072413573837640807.jpg" /></div> </div> <div class="imgItem"> <div><img src="http://img.cgypt.com/ad/2020052110265727783873.jpg" /></div> </div> </body> </html>