如何使用
- 选择预设比例(如 9:16 / 16:9 / 4:5)或手动输入比例。
- 输入已知宽度或高度。
- 工具自动计算另一边的尺寸。
- 复制生成的 CSS
aspect-ratio代码用于布局。
核心功能
- TikTok/Reels (9:16):一键套用竖屏主流比例与常见分辨率思路。
- 生成 aspect-ratio CSS:自动生成
aspect-ratio: W/H;及兼容性建议。 - 自动推算尺寸:输入宽或高即可计算另一边,保持比例不变。
- 可视化比例预览:实时显示矩形预览,避免尺寸填错。
- 本地隐私:尺寸与素材信息不上传服务器。
相关工具
Lorem Ipsum 假文生成器 (JSON/HTML) - 开发者友好
生成用于设计与前端开发的 Lorem Ipsum 假文,支持纯文本、HTML <p> 标签与 JSON 数组输出。可变长度(段落/句子/单词),并支持中文假文。全程本地生成不上传。
颜色格式转换与 WCAG 对比度检测器
在 HEX、RGB、HSL、CMYK 之间实时转换颜色,并自动计算 WCAG 无障碍对比度(AA/AAA)。支持印刷用 CMYK 百分比与可视化预览。全程本地处理不上传。
免费图片取色器与调色板生成器
选择、拖拽或粘贴图片,在浏览器本地吸取像素颜色,复制 HEX/RGB/HSL,并提取图片主色调色板。
计算逻辑
- 计算公式: [ H = W \times \frac{r_H}{r_W} ] 或 [ W = H \times \frac{r_W}{r_H} ]
- CSS 写法示例: [ \text{aspect-ratio}: \frac{16}{9} ]
常见问题
视频平台(TikTok/Reels)的最佳比例是多少?
标准比例是 9:16(竖屏),常见分辨率为 1080×1920。使用 9:16 预设可快速核对尺寸。
如何在 CSS 中使用长宽比?
直接写 aspect-ratio: 16/9;。本工具会生成包含该属性的代码片段,并建议必要的尺寸回退。
数据安全吗?会上传到服务器吗?
不会。所有计算与预览在浏览器本地完成,不上传任何尺寸或内容。
是否免费?可以用于商业项目吗?
免费使用,适合个人/团队在内容生产与 UI 开发中快速对齐尺寸。
为什么会出现 1–2 像素误差?
某些尺寸需要取整(整数像素)。工具会按最接近的整数进行四舍五入,保证比例尽量准确。