MODERN CSS
宽高比aspect-ratio
只给宽度，高度按比例自动算。以前要靠 padding-top:56.25% 的 hack，现在一个属性解决。
效果预览
16 / 9
1 / 1
4 / 5
适合用在哪
视频/图片容器、卡片缩略图、骨架屏占位。保证图片加载前后布局不跳（CLS 为 0 的关键）。
容易踩的坑
- 容器同时设了固定 height，比例被忽略，常被误以为浏览器不支持。
- 内容超出比例框时元素被撑高，需配合 overflow:hidden 保持比例。
- img 不写 width/height 属性只靠 CSS，样式加载前仍会产生 CLS。
设计提示词 · Prompt
宽高比（aspect-ratio）：直接写 aspect-ratio: 16 / 9（或 1、4/5、3/2）。常见组合 —— 视频 .video{width:100%;aspect-ratio:16/9;object-fit:cover}；方形头像容器 aspect-ratio:1；竖版封面 4/5 或 9/16。要点：把 aspect-ratio 和 object-fit:cover 搭配用于图片，避免拉伸变形；和 width:100% 搭配用于响应式；如果元素同时设了固定 height，aspect-ratio 会被忽略。骨架屏就用同样的 aspect-ratio 撑出位置，图来了直接填进去。
aspect-ratio: simply write aspect-ratio: 16 / 9 (or 1, 4/5, 3/2). Common combinations — video: .video{width:100%;aspect-ratio:16/9;object-fit:cover}; square avatar container: aspect-ratio:1; portrait cover: 4/5 or 9/16. Key points: pair aspect-ratio with object-fit:cover for images to avoid stretching; pair it with width:100% for responsiveness; if the element also has a fixed height, aspect-ratio is ignored. Skeleton screens use the same aspect-ratio to reserve space, and the image drops straight in when it arrives.
常见搭配
同一页面里经常和「宽高比」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="mc-ar">
<div class="mc-ar__i"><div class="mc-ar__b mc-ar__b--16x9"></div><em>16 / 9</em></div>
<div class="mc-ar__i"><div class="mc-ar__b mc-ar__b--1x1"></div><em>1 / 1</em></div>
<div class="mc-ar__i"><div class="mc-ar__b mc-ar__b--4x5"></div><em>4 / 5</em></div>
</div>
</div>