contain-intrinsic-size仅对设了contain:size/layout的块级容器生效，不能用于<img>标签；必须配合contain或content-visibility: auto使用，且只接受绝对像素值，宁大勿小以防止布局偏移。
contain-intrinsic-size 不是图片属性，它只对容器生效
很多人搜“intrinsic-size 优化图片占位”，结果在 <img> 标签上加 contain-intrinsic-size，完全无效——这个 CSS 属性只作用于设置了 contain（如 contain: layout 或 contain: size）的块级容器，<img> 默认不满足条件，浏览器直接忽略。
真正要占位的，是包裹图片的容器（比如 <div class="image-wrapper">），而不是图片本身。
- 必须给容器显式设置
contain: size或contain: layout size，contain-intrinsic-size才会起作用 -
<img>即使设了width和height属性，加载前仍可能塌陷——因为这些值不参与布局占位承诺，仅作渲染参考 - 移动端尤其要注意：iOS Safari 对
contain-intrinsic-size的支持从 iOS 15.4 开始，旧版本会静默忽略
用 contain-intrinsic-size 替代 padding-top 百分比时的硬约束
padding-top 百分比方案靠父容器宽度推算高度，灵活但依赖结构嵌套；contain-intrinsic-size 是更底层的尺寸承诺，但限制更多：
- 只接受绝对单位：
px、em（需注意根字体大小）、rem（同理），但不能用百分比——contain-intrinsic-size: 56.25%是非法语法 - 双值写法
contain-intrinsic-size: 300px 200px表示 inline-size block-size（宽高），顺序不可颠倒 - 若容器内容高度浮动（如多行标题+描述），宁可设大一点（如
contain-intrinsic-size: auto 320px），小了会导致撑破占位、触发重排 - 和
aspect-ratio不能共存生效：两者都影响盒模型，但contain-intrinsic-size优先级更高，会覆盖aspect-ratio计算出的高度
为什么写了 contain-intrinsic-size 还抖？检查这三点
常见现象：加了 contain-intrinsic-size，首屏仍闪动、滚动时内容上跳。问题往往不在属性本身，而在配套缺失：
立即学习“前端免费学习笔记（深入）”；
- 漏写
contain: size—— 单独写contain-intrinsic-size不会激活占位机制，浏览器当注释处理 - 容器用了
display: inline或display: inline-block——contain在非块级元素上部分失效，必须是block、flex或grid - 父容器高度由子项撑开，而子项又依赖该容器占位 —— 形成循环依赖，最终 fallback 到 0 高度；此时必须给父容器设
min-height或用aspect-ratio打断循环
图片加载占位，选 padding-top 还是 contain-intrinsic-size？
没有绝对优劣，取决于场景约束：
- 需要兼容 iOS 14 或 Android 4.4 以下？用
padding-bottom百分比 + 绝对定位，稳定且无需 JS - 页面已大量使用
content-visibility: auto，且卡片高度相对固定？搭配contain-intrinsic-size能统一管控，避免重复计算 - 图片比例不确定（如用户上传头像）？两种方案都失效，必须配合 JS 测量或服务端返回宽高，再注入内联样式
- 注意：背景图（
background-image）永远不适用contain-intrinsic-size，它不参与布局，只能靠aspect-ratio或padding-top容器占位
真正容易被忽略的是：无论哪种方案，box-sizing: border-box 必须全局启用，否则 padding 或 border 会额外撑出容器，破坏预设尺寸。
