图片宽高失效主因是缺失原始尺寸信息，导致浏览器无法计算宽高比；仅设width:100%或max-width:100%时，加载前占位高度为0，加载后突然撑开引发布局跳动。
为什么只写 CSS 宽高会失效
只用 width: 100% 或 max-width: 100% 而不提供原始尺寸，浏览器无法推算宽高比。图片加载前占位高度为 0 或默认内联高度（通常约 1em），加载后突然撑开，下方内容被暴力下推——这就是“跳动”的直接原因。
常见错误包括：
- 仅靠
img { width: 100%; height: auto; }，没设 HTMLwidth/height属性 - 用 Tailwind 的
h-48等固定高度类，但图片比例不匹配，导致拉伸或裁剪失控 - 在 Vue/React 中动态拼接
src却忘了同步传入原始尺寸
怎么正确设置 HTML 的 width 和 height 属性
这两个属性必须是图片文件本身的像素尺寸（intrinsic dimensions），不是你希望它显示的尺寸。浏览器靠它们计算宽高比，再结合 CSS 宽度反推高度。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 用工具查原始尺寸：macOS 预览 → 《显示检查器》→ 《更多信息》；Windows 右键属性 → 《详细信息》；命令行可用
identify -format "%wx%h" image.jpg（ImageMagick） - 写进 HTML 标签，不是 CSS：
<img src="hero.jpg" width="1920" height="1080"> - 保留 CSS 控制响应式：
img { width: 100%; height: auto; }—— 此时浏览器会按 1920/1080 = 1.777 的比例，根据容器宽度自动算出高度 - 如果 CMS 输出的图片尺寸不可控，至少 fallback 到一个典型比例（如 16/9 或 4/3），用 JS 动态写入
style="--aspect-ratio: 16/9"并在 CSS 中读取
aspect-ratio 能替代 width/height 吗
可以，但有前提：aspect-ratio 作用于块级容器或支持它的替换元素，而原生 <img> 在部分旧版 Safari 和所有 IE 中不参与盒模型计算。直接写 img { aspect-ratio: 16/9; } 在 Safari 15.4 之前无效。
稳妥做法：
- 现代项目（Chrome/Firefox/Safari 15.4+）：直接用
img { aspect-ratio: 16/9; width: 100%; height: auto; } - 需兼容 Safari ≤15.3 或 IE：必须用包裹容器 +
padding-top技巧，或退回到 HTMLwidth/height属性 -
aspect-ratio不解决懒加载图片的占位问题，仍需配合loading="lazy"和背景占位色（如background-color: #f5f5f5）
Grid 或 Flex 布局里图片还在跳怎么办
Grid/Flex 容器本身不强制子项预留空间。即使你写了 grid-template-rows: 1fr，<img> 没尺寸时依然先渲染为 0×0，等加载完成才触发重排，整个 track 会被重新计算。
关键动作：
- 别依赖 grid track 定义来“兜底”，必须让图片或其父容器自身具备确定尺寸
- 推荐组合：
<div class="ratio-box"><img src="..."></div>，然后.ratio-box { aspect-ratio: 4/3; width: 100%; } - 若用
object-fit: cover，务必确保父容器有明确宽高或aspect-ratio，否则裁剪行为不可预测 - 避免在媒体查询中反复切换
display类型（如flex↔grid），这会清空已有尺寸缓存，加剧抖动
最常被忽略的一点：后端返回的图片 URL 如果带参数（如 ?w=800&h=600），前端无法提前知道原始尺寸，此时纯 CSS 方案必然失效，必须由服务端注入 width/height 属性，或 JS 在请求头中预取尺寸元数据。
