> For the complete documentation index, see [llms.txt](https://sunzsh.gitbook.io/xiaoshan.bug/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sunzsh.gitbook.io/xiaoshan.bug/css-she-zhi-kuan-gao-bi.md).

# css设置宽高比

{% embed url="<https://v.douyin.com/r8LbH6R/>" %}

{% embed url="<https://www.bilibili.com/video/BV1xa411S7kj/>" %}

今天无意中学到一个CSS的属性

就是这个

它可以控制容器的宽高比例

比如现在把它注释掉

大家看 它就是这样的

然后把它恢复呢

它就会一直保持这么一个1:1的比例

那为了测试呢

咱们给这个加一个content editable

好我们来在这里边写点字

大家看 随着内容的改变

他宽高会始终保持这么一个1:1的比例

或者我们还可以把它改成比如说2:

大家看 或者

2.5他都支持

而且他这个属性

现在已经支持大部分浏览器了

只有IE还不支持

大家基本上其他的都支持了