纯css实现宽高动态相等


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 70%;  
                position:relative;                    
            }
            .box:before{
                content: '';
                padding-top: 100%;
                box-sizing: border-box;   
                display: block;
                width: 0;  
            }
            .pox{                
               position:absolute;
               height:100%;
               width:100%;
               left: 0;
               top: 0;         
               border: 1px solid red;
               box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="pox">内容</div>
        </div>
    </body>
</html>