今天遇到一个常见的需求，当浏览器页面大小变化，保持一个div的宽高比。
考虑用css实现，因为js监听页面变化肯定不如css性能好。
我们举例将div宽高比设置为4比3，代码如下：
- 使用aspect-ratio属性设置宽高比，简单但是兼容性差：
aspect-ratio这个css属性只兼容2021之后的浏览器
这个网站不错，可以查看浏览器对属性的兼容情况，推荐：caniuse.com/
- 使用padding，有更好的兼容性
代码中将.inner的元素设置宽度为父元素的100%，然后设置padding-bottom（padding-top）为75%，这里有一个知识点就是padding和margin的值如果设置为百分比则是父元素宽度的百分比。
基于padding实现的固定宽高比有一个问题就是.inner元素的高度是0，装不了东西。 此时可以这么解决：
使用了相对定位和绝对定位，此时.content就可以充满.inner元素了!
