用伪元素before实现元素的等比例缩放

<style>
             /*等比缩放*/
                    .box{
                    position: relative;
                    width: 100%;     /* desired width */
                    background: #000;
                    color: #fff;
                }
                .box:before{
                    content: "";
                    display: block;
                    padding-top: 30%; 
                    background: #f00;
                }
                .content{
                    position:  absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                }
        </style>
     
     
        <div class='box'>
              <div class='content'>1:1</div>
            </div>