CSS中有一個屬性 padding對元素寬度存在依存關系。如果一個元素的 padding屬性以百分比形式表示，padding 的大小是以該元素包含塊寬度為參照的（包含塊傳送門）。
若想要元素尺寸變化時，寬高比例不變，可以將height 設為0，padding 撐開盒子高度，達到寬高比例不變的效果。
代碼如下：
<!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ background: #0a265e; height: 100%; } .box{ width: 80%; height: 500px; background: red; } .children{ width: 80%; height: 0; padding-bottom: 30%; background-color: #008b57; } </style> </head> <body> <div class="box"> <div class="children"></div> </div> </body> </html>