直接加max-width:100%和height:auto不能彻底解决变形，因该组合依赖父容器提供稳定宽度参照；box-sizing:border-box+padding会压缩内容区导致高度反推失真，inline间隙、Flex/Grid收缩、align-items:stretch拉伸及object-fit无容器尺寸约束等均是主因。
直接加 max-width: 100% 和 height: auto 能解决大多数拉伸问题，但前提是父容器有可计算宽度、没被 box-sizing: border-box + padding 干扰高度推算，且图片不是 Flex/Grid 子项中被默认拉伸的“受害者”。
为什么 max-width: 100% 还是变形？
因为 max-width: 100% 只限制宽度上限，不保比例；height: auto 的“auto”需要父容器提供有效宽度作为参照。一旦参照失效，高度就错。
- 父容器用了
width: 100%+padding: 20px+box-sizing: border-box→ 图片可用宽度 = 总宽 - 40px，但max-width: 100%仍按总宽算，导致高度反推失真 -
<img>是 inline 元素，默认带底部空白，height: auto会包含这行内间隙，视觉上像被压扁 - Flex 容器中没设
min-width或flex-shrink: 0，小屏下轨道收缩过度，max-width: 100%失去参照，算出来是0px - 解决方法：给
<img>加display: block消除间隙；父容器避免padding和width: 100%共存，改用margin外扩；若必须用padding，则显式写width: calc(100% - 40px)
Flex 布局里图片被拉高或压成细线怎么办？
根本不是图片本身出问题，而是 Flex 默认行为在作祟：align-items: stretch 强行撑高，flex-basis: 0 导致坍缩。
- 单独写
flex-shrink: 0无效——浏览器回退到flex-basis: 0，图片直接坍缩成竖线 - 安全写法是
flex: 0 0 auto（禁放大、禁收缩、以固有尺寸为基准） -
align-items: stretch是垂直拉伸元凶，主轴为水平时，设align-items: flex-start或center即可解除 - 嵌套 Flex 中图片变细线？查
min-width: 0—— 在<img>自身或其**直接父容器**上加该声明 - 典型组合：
img { max-width: 100%; height: auto; min-width: 0; flex: 0 0 auto; }
object-fit 写了却没效果，哪里卡住了？
object-fit 不是自动适配开关，它只在已有明确宽高的容器内生效。容器没尺寸，它就静默失效。
立即学习“前端免费学习笔记（深入）”；
- 必须同时满足三条件：容器有明确宽高（推荐
aspect-ratio: 4 / 3+width: 100%），<img>设width: 100%+height: 100%（或height: auto配合锁高），父容器加overflow: hidden（尤其cover时） - 别混用
max-width: 100%和width: 100%—— Safari 可能触发尺寸重算异常 - iOS Safari ≤13.3 完全不支持
object-fit在<img>上生效，加-webkit-object-fit也无效，会退化为fill（即拉伸） - 兜底方案：
@supports (object-fit: cover)包裹样式，不支持环境用background-image+background-size: cover替代（但丢失alt和懒加载）
移动端真机一跑就变形，最容易漏哪三点？
不是代码写错，是环境差异和前提条件缺失暴露得更彻底。
- 容器没锁比例：写了
aspect-ratio: 16 / 9，但父容器宽度为0或auto，比例根本算不出来 - 忘了配
object-position：默认center center可能切掉人脸或 Banner 文字，人像优先用center top，底部有文字的用center bottom - 在 Safari 13.3 及更早版本环境直接写了
object-fit—— 渲染引擎级不识别，不是样式没加载，是压根不处理 - 额外注意：横屏切换、软键盘弹出、动态内容加载都可能让容器宽高比突变，
cover表现会剧烈波动，需用媒体查询或 JS 动态响应
