方式1

/* 兼容性好 */
.use-transform {width: 10%;height: 0;padding-bottom: 10%;border: 1px solid #000;
}

方式2

使用 vw: 为什么不用%？ % 是相对于父元素的大小设定的比率，body默认的宽度为视窗的宽度，没有内容时高度为0，而vw、vh 是视窗大小决定的，不取决于内容。vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度。如下图：

/* 简单方便，兼容性 */
.demo {width: 10%;height: 10vw;border: 1px solid #000;
}

html

    <div class="use-transform">正方形正方形正方形正方形正方形正方形正方形</div><div class="demo">正方形正方形正方形正方形正方形正方形正方形</div>

效果

参考

css单位