之前做项目碰到一个需求，项目中需要放置一个正方形的图片，但是这个项目是大屏项目，里面的内容需要自适应屏幕，所以宽度用的是百分比，因为宽度是百分比，导致高度不好写百分比，以下有2种方式去解决这个问题。

1. padding-top 和 定位 结合的方式

这种方式的兼容性比较好，适用的浏览器比较多

2. aspect-ratio 方式

这种方式可以少写一个 div ，但不是所有的浏览器都支持，可以去兼容性的网站去查一下。

网址：Can I use... Support tables for HTML5, CSS3, etc

这个是我目前看到的还不错的2个方法，后期有更好的可以继续更新出来。