SuperAPI AI 工具集

aspect-ratio-design

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

用途:为图片与视频等媒体内容提供宽高比规范和响应式尺寸策略,保证界面中媒体尺寸一致。

主要能力:列出常见宽高比及适用场景——1:1用于头像、缩略图、社交帖;4:3用于产品图、演示;3:2用于摄影、卡片;16:9用于视频、主视觉、横幅;21:9用于超宽主视觉、电影感;9:16用于竖版视频(Stories、Reels)。

必要用法:用CSS设定比例与填充方式,例如给 .media 设置 aspect-ratio: 16 / 9; object-fit: cover; width: 100%;。

规则:同一网格内保持比例一致,卡片网格混用比例会造成视觉混乱;照片用 object-fit: cover 裁剪填满,logo和图标用 contain;用 object-position 控制裁剪焦点;响应式比例可桌面更宽、移动更高,例如 21:9 → 16:9 → 4:3。

限制:资料未提供具体平台支持范围、浏览器兼容性、安装方式或收费信息,暂未提供。