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>