CSS实现等宽高

有时候我们在前端布局的时候需要做到高度和宽度相等，如果只是固定的宽高倒是很好解决。但如果宽度本身并不固定，就不好实现了。
下面是实现等宽高的方法：

    <div class="wrap">
        <div class="content">css实现等宽高</div>
    </div>

下面是css样式：

     .wrap {
            width: 33%;
            height: 0;
            padding-top: 33%;
            margin: 100px;
            display: inline-block;
            position: relative;
        }
        .content{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-color: aqua;
        }