▭

CSS 宽高比容器

生成带 padding 回退方案的响应式宽高比容器。

宽度

高度

预览

输出

关于此工具

在浏览器中输入宽高比例即可生成响应式的宽高比容器，同时提供现代 aspect-ratio CSS 和 padding-top 百分比回退方案。

常见问题

为什么要包含 padding-top 回退方案？

padding-top 百分比技巧可以在不支持现代 aspect-ratio 属性的旧版浏览器中重现固定的宽高比。

比例会被化简吗？

会——像 16 和 9 这样的数值会按最大公约数约分，因此 1920 比 1080 会显示为 16 / 9。

更多工具