aspect-ratio仅控制容器宽高比，不能缩放内容；需配合object-fit、相对单位（如clamp）、min-height:0等实现整体自适应，并注意safari 15.0–15.3兼容性及布局抖动问题。
aspect-ratio 不能让卡片内容等比缩放，只能让卡片容器保持宽高比；想让文字、图片跟着一起“缩”，得靠其他手段配合。
为什么设了 aspect-ratio 卡片还是不变形但内容溢出或留白？
因为 aspect-ratio 只控制容器自身的尺寸比例（比如 aspect-ratio: 4 / 3 表示宽度每变 4px，高度自动算出 3px），它不干预内部子元素的渲染逻辑。常见现象包括：
- 图片没填满，顶部/底部留白 → 忘加
object-fit: cover或contain - 标题文字在小屏上挤成一团 → 字体用了固定
px，没换rem或clamp() - 按钮被压扁或错位 → 卡片内用了
height: 100%或flex: 1但没设min-height: 0，导致 Flex 收缩异常
aspect-ratio 加在哪？千万别加在 <img> 上
浏览器会优先尊重图片的固有宽高比（intrinsic aspect ratio），直接忽略你写的 aspect-ratio 声明。正确做法是：
- 给卡片外层容器（如
<div class="card">）设 <code>aspect-ratio: 4 / 3 - 确保该容器是块级元素：
display: block或display: flex - 内部
<img>设为：width: 100%; height: 100%; object-fit: cover - 避免同时写
width和height—— 一旦两个都固定，aspect-ratio就完全失效 - 字号用
font-size: clamp(0.875rem, 2.5vw, 1.125rem)，而不是font-size: 1rem - 内边距用
padding: clamp(0.5rem, 2vw, 0.75rem)，别写死padding: 12px - 图片资源用
srcset+sizes，防止小屏加载大图模糊或卡顿 - 避免对子元素设
margin: 10px这类绝对值，换成相对单位或gap（如果是 Flex/Grid 容器） - 别在大量卡片上滥用
vw配合aspect-ratio—— resize 触发频繁重排，尤其低端安卓机明显卡顿 - 服务端渲染（如 Next.js）中，Safari 15.3 可能首屏不触发重排，建议加
@supports (aspect-ratio: 1)降级为padding-bottom方案 - 如果必须兼容老设备，
padding-bottomhack 仍是目前最稳的 fallback：父容器设position: relative; width: 100%;，子容器用position: absolute; top: 0; left: 0; width: 100%; height: 100%;，再靠padding-bottom: 75%模拟 4:3
如何让文字和间距也“响应式缩放”？
靠 aspect-ratio 自身做不到，必须手动驱动内容适配。稳妥方案是：
Safari 兼容性和性能要注意什么？
iOS 15.0–15.3（对应 Safari 15.0–15.3）存在严重问题：首次渲染可能忽略 aspect-ratio，导致卡片塌陷；resize 时还可能抖动。上线前必须真机验证。另外：
真正麻烦的从来不是怎么让盒子“看起来等比”，而是怎么让里面所有东西——字体、行高、边距、图片分辨率——都在缩放过程中保持视觉平衡。这需要把 aspect-ratio 当作基础约束，再用相对单位一层层去对齐内容节奏。
