防止图片拉伸的关键是css约束与图片尺寸一致性；需对设置max-width: 100%、height: auto、display: block，且内各格式图片必须保持相同宽高比。
为什么加了 <picture></picture> 图片还是被拉伸
-
<img>没写max-width: 100%和height: auto，父容器缩小时图片强行撑开或压扁 - 多个
对应不同构图（如手机裁脸、桌面展全景），但图片实际宽高比不一致，切换时视觉跳变 → 看起来像“拉伸” -
sizes值与实际布局脱节，导致浏览器选错尺寸版本，比如小屏加载了宽高比失配的大图 - 用
width/height属性硬设像素值，又没配合object-fit，直接覆盖原始比例
<picture></picture>里各格式图片必须保持相同宽高比
art direction（构图切换）允许你换图，但不能换比例——否则<img>之间切换时，容器高度突变，用户看到“抽搐式跳变”。
- 所有
srcset里的 WebP/JPEG/AVIF 文件，必须是同一构图下的不同格式，不是“竖图 vs 横图” - 如果真要横竖切换（如 portrait→landscape），需用
object-fit: cover+ 固定容器宽高，并确保所有图片填充后语义可读 - 裁剪类图片（如
hero-mobile-crop.jpg）应提前用工具统一导出为 4:5 或 9:16 等标准比例，而非依赖 CSS 强行缩放
防止拉伸的最小可行 CSS 组合
只靠 HTML 结构无法防拉伸，必须配以下三条规则作用于<img>：
-
max-width: 100%：限制宽度上限，不撑破容器 -
height: auto：强制按原始宽高比缩放 -
display: block：消除<img>默认的 inline 基线对齐带来的底部空白（间接影响容器高度计算）
img {
max-width: 100%;
height: auto;
display: block;
}
别把这三条写在<picture></picture>或<source></source>上——它们不渲染，也不继承样式。
容易被忽略的 layout shift 风险点
即使图片不拉伸，尺寸未声明仍会导致 CLS（累计布局偏移）：- 不写
width和height属性，浏览器首次渲染时不知道<img>占多大空间，加载后突然推挤内容 -
<picture></picture>里多个指向不同分辨率图片，但没配 sizes，浏览器 fallback 到src，而src图片尺寸又和实际布局不匹配 - 使用
object-fit时没配object-position，关键内容（如人脸）可能被切掉，用户感知为“变形”
真正稳住画面的，是提前声明尺寸 + 保持比例 + CSS 约束三者闭环。任何一环断开，<img>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
