【移動端元素按比例縮放】用Padding-buttom撐開高度
阿新 • • 發佈：2019-01-07
1、在說容器按比例縮放前，我們先說下圖片按比例縮放。
對於圖片，預設只設置圖片的一個寬或高，那麼另一個值就會按照圖片真實比例縮放。
圖片因為本身存在寬高比，所以設定一個值，另一個值自動也就根據真實的比例對應上，但是如果是視訊、div元素等元素則沒有這個屬性。
一般在響應式中，我們會要求視訊、或者一些圖表、一些塊元素的寬高比為16：9或4：3，這麼一來就比較頭大了。當用戶改變瀏覽器寬度的時候（改變高度不考慮），元素寬度變了，那麼高度也得根據我們要求的16：9或4：3改變。
2、解決核心思想為：提供一個容器，設定容器的高度為0，再設定padding-bottom為56.25%（需要自適應的元素高度除以寬度*100%）（因為padding的百分比是按照容器寬度計算的，所以由padding來撐開容器高度，而不是height，保證了容器的寬高比例），最後設定視訊絕對定位，其寬高為容器的100%
3、根據這個思想，程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>Title</title> <style> body { margin: 0; padding: 0; } ::-webkit-scrollbar { width: 0px; } .wrap { height: 0; padding-bottom: 56.25%; /* 16:9 相對於寬padding*/ position: relative; width: 100%; background-color: #7cff22; } .wrap box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .wrap2 { height: 0; padding-bottom: 75%; /* 16:9 設計稿的：高/寬*100%*/ position: relative; width: 100%; background-color: #1733ff; } .wrap2 box2 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } </style> </head> <body> <div class="wrap"> <div class="box"> 211/375=9/16=56.25% <!--233/414=9/16=56.25%--> </div> </div> <div class="wrap2"> <div class="box2"> 281/375=3/4=75% <!--311/414=3/4=75%--> </div> </div> </body> </html>
當螢幕尺寸改變是依然按照16:9的比例縮放的
