CSS 宽高比
免费在线使用 CSS 宽高比 无需安装即可使用工具
关于 CSS 宽高比
这个工具为宽:高宽高比生成 CSS，可以使用现代的 `aspect-ratio` 属性，也可以使用经典的百分比 padding hack。它提供了常见的比例预设、自定义的宽/高输入（1-100）、一个实时预览框和可直接复制的输出。预览会根据所选方法调整渲染方式，让你准确看到每种技术产生什么效果。
如何使用
1. 点击一个常见比例预设（16:9、4:3、1:1、21:9、3:2、2:3、9:16），或输入自定义的宽和高（1-100）。 2. 选择一种方法：Modern（`aspect-ratio`）或 Padding Hack。 3. Preview 框会使用所选技术渲染该比例。 4. 在 Output 卡片上点击 Copy 以复制生成的 CSS。
方法与生成的 CSS
Modern 输出一行代码：`aspect-ratio: <width> / <height>;`。Padding Hack 输出一个 `.container`，包含 `position: relative; width: 100%; padding-top: <height/width*100>%;` 以及一个填满它的绝对定位 `.content`，这是在不支持 `aspect-ratio` 的环境下的传统方案。预览使用相同的样式，最大宽度被限制在 400px，因此视觉效果与 CSS 描述的技术一致。
▶什么时候应该使用 Padding Hack 而不是 Modern？
在当前浏览器中使用 Modern（`aspect-ratio`）；它更简单，且自 2021 年起已得到良好支持。仅当你必须支持缺少 `aspect-ratio` 的非常旧的浏览器（例如旧版 IE 或 2021 年前的 Safari）时，才使用 Padding Hack。
▶宽和高输入可以接受什么范围？
两者都被限制在最小值 1 和最大值 100 之间。超出该范围的值会被强制取最近的边界值。
▶工具会输出 HTML 和 CSS 吗？
只生成 CSS。对于 Padding Hack，它会输出 `.container` 和 `.content` 规则，但你需要自己添加匹配的 HTML 结构。
▶为什么两种方法的预览看起来不同？
每种方法都使用真实的 CSS 渲染（Modern 使用 `aspect-ratio`，Padding Hack 使用 `padding-top` 和绝对定位的内部框），因此预览展示的是实际技术，而不是伪造的比例。
如果这个工具对你有帮助的话，请考虑请我喝杯咖啡。
请给我买杯咖啡吧。