aspect-ratio 必须写在容器上而非 img 元素上，因为 img 自身受懒加载、空 src 或内联行为干扰易导致比例计算失准；容器设 aspect-ratio 可稳定宽高比，再通过 width/height:100% 和 object-fit:cover 让图片填满。
仅设 aspect-ratio 不足以稳住图片比例，必须和 width: 100%、height: 100%、object-fit: cover 配合，且该比例要写在外层容器上——<img> 自身设 aspect-ratio 无效。
为什么 aspect-ratio 必须写在容器上，不能直接写在 <img> 上
现代浏览器中，<img> 元素自身支持 aspect-ratio，但 Grid 布局下它常被内容（如加载中的空白、文字替代符）或默认内联行为干扰，导致比例计算失准。更可靠的做法是把比例约束交给包裹容器（比如 .gallery-item），让它先撑出稳定宽高比，再让图片在里面“填满”。
-
aspect-ratio: 4/3写在.gallery-item上，配合overflow: hidden，确保容器不塌缩也不溢出 -
<img>只负责渲染，不参与比例定义；设width: 100%; height: 100%才能真正拉满容器空间 - 若直接写
img { aspect-ratio: 4/3 }，遇到懒加载未触发、src为空或跨域资源阻塞时，容器高度可能为0，Grid 行高随之塌陷
grid-template-columns: repeat(auto-fit, minmax()) 和 aspect-ratio 怎么协同不打架
Grid 负责分配列数和轨道宽度，aspect-ratio 负责单个格子的高宽关系——二者分层协作，但容易因尺寸参照错位而失效。
-
minmax(250px, 1fr)中的250px是容器最小宽度，不是图片尺寸；若图片源图小于该值，会拉伸，需服务端统一生成 ≥250px 的缩略图 - 容器设了
aspect-ratio后，Grid 仍按列宽分配空间，但行高由该比例自动推导；无需再写grid-auto-rows，否则可能覆盖比例效果 - 别在
.gallery-item上同时写height: 200px和aspect-ratio——显式height会覆盖比例计算，导致小屏下留白或裁切异常
移动端 Safari 下 aspect-ratio 失效的隐藏原因
不是属性不支持（iOS 15.4+ 已稳定支持），而是两个条件常被忽略：一是 gap 在小屏占比变大，挤压了容器实际可用宽度；二是 Safari 对 minmax() 的解析存在缓存机制，尤其在页面缩放或横竖屏切换后未及时重排。
- 用
gap: clamp(8px, 2vw, 16px)替代固定值，避免小屏下间隙吃掉太多宽度 - 给
.gallery-item加min-width: 0，防止 Safari 把容器最小宽度锁定为图片 intrinsic size - 真遇到首次渲染比例错乱，可加
transform: translateZ(0)强制触发重绘（仅限 iOS 16.4 之前版本）
旧浏览器 fallback 不要硬上 JS 替换 DOM
IE11 / Safari ≤ 15.3 不支持 aspect-ratio，但用 JS 动态插入伪元素或计算高度成本高、易出竞态。更轻量的做法是 CSS 降级。
- 用
@supports not (aspect-ratio: 1/1)包裹现代写法，降级样式里改用padding-top: 75%+ 绝对定位模拟 4:3 - 保持结构一致：
.gallery-item仍是外层容器，降级时只换内部实现，不改 HTML - 别依赖
object-fit降级方案里的background-image—— 它绕过loading="lazy"，且无法被屏幕阅读器识别
最易被忽略的一点：Grid 容器本身必须有明确宽度约束（比如 max-width: 1200px 或 width: 100%），否则 minmax() 缺少参照系，aspect-ratio 容器就算写对了，也会因父级无限宽而撑开整行，最终只剩一列。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
