应删除html中width/height像素属性，改用css的max-width: 100% + height: auto保比例缩放；固定容器则配合aspect-ratio与object-fit控制填充，避免拉伸失真和布局跳动。
避免在 HTML 中直接用 width 和 height 属性写死像素值，是防止图片失真的第一步。浏览器会强制拉伸或压缩图像以匹配你写的尺寸，完全无视原始比例——哪怕只是写 width="300" 而没写 height，也容易因默认高度行为导致变形。
别在 img 标签里硬写 width/height 像素值
HTML 的 width 和 height 属性（如 <img src="a.jpg" style="max-width:90%" style="max-width:90%">）是强制指令，不是建议。只要数值和原图比例不一致，就必然拉伸。即使你算对了比例，一旦响应式布局变化，这些固定值也会失效。
- 删除所有
width和height的 HTML 属性，改用 CSS 控制 - 如果必须标注尺寸（比如为 SSR 或 SEO 提供布局线索），优先用
aspect-ratio替代，例如：style="aspect-ratio: 4 / 3;" - 旧浏览器需 fallback：搭配
height: 0; padding-top: 75%;（对应 4:3）+ 绝对定位子图
用 max-width + height:auto 保比例缩放
这是内容型图片（文章配图、产品主图）最稳妥的组合，适用于父容器宽度可变的场景。
-
max-width: 100%：图片最多占满父容器，小图不放大 -
height: auto：必须显式声明，否则可能继承行高或被 flex 拉伸 -
display: block：消除 inline 元素自带的底部空白，避免意外留白 - 示例：
<img src="a.jpg" style="max-width:90%">
填满固定区域时，用 object-fit + 固定容器
当需要头像、卡片封面等“严格尺寸内展示”，不能靠 max-width，而要让容器有明确宽高，再用 object-fit 控制适应方式。
- 先给父容器设尺寸，比如
width: 200px; height: 200px; overflow: hidden; - 图片样式写：
width: 100%; height: 100%; object-fit: cover; object-position: center; - 漏掉
object-position: center可能导致人像切头，尤其用cover时 - 避免同时写
max-width: 100%和width: 100%，二者冲突
响应式加载也要配合尺寸逻辑
只靠 CSS 缩放不能解决带宽浪费。大图在手机上仍会下载全尺寸文件，再由浏览器缩放——既慢又模糊。
- 首屏关键图禁用
loading="lazy"，防止布局跳动（CLS） - 用
srcset+sizes提供多尺寸版本，例如：srcset="a-480w.jpg 480w, a-800w.jpg 800w"配合sizes="(max-width: 600px) 480px, 800px" - 多格式可用
<picture></picture>，WebP 作主图，<img>作 fallback - 构建后务必验证路径是否被重写，本地双击打开
file://协议下相对路径会失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
