以前如果要div宽高相等的正方形，需要在css样式中指定具体的值，必须明确设置宽高“width”和“height”值相等，才能显示正方形。当div的宽为动态百分比时，那么div就无法完成正方形局部显示，需要编写很多JavaScript脚本才能实现。自2020年后各大浏览器推出了“aspect-ratio”属性，可以通过此属性设置宽高比例动态的保持比例显示，如下代码：

HTML 代码  复制
<!DOCTYPE html>
<html>
<head>
    <title>aspect-ratio用法 | 遺昕传媒 - weisim3.com</title>
    <style>
        .square {
            width: 50%; 
            aspect-ratio: 1 / 1; 
            background-color: orange; 
           
        }
    </style>
</head>
<body>
    <div class="square"></div>
</body>
</html>

如图：

可以看到此时css设置“.square” 设置div的宽为“50%”， “aspect-ratio”属性设置为:“1/1”宽高比例为“1：1”，如果改成“1/2”则宽高为“1：2”，通过该css属性简单设置即可。