img加max-width:100%仍变形，因该属性只限宽不限高，height:auto依赖父容器有效宽度上下文；父容器box-sizing:border-box+padding会压缩内容区，导致高度反推失真；inline默认间隙、Flex/Grid收缩、object-fit无容器尺寸约束及iOS Safari旧版不支持等均是主因。
img加了max-width: 100%还是变形，为什么？
因为max-width: 100%只管“不撑破”，不管“比例保不保”。它限制宽度上限，但高度仍依赖height: auto——而这个auto需要父容器有可参考的宽度上下文。一旦父容器用了box-sizing: border-box又带padding，实际内容区变窄，height: auto就按这个被压缩的宽度反推高度，比例立刻崩。
常见踩坑点：
- 父容器设了
width: 100%+padding: 20px+box-sizing: border-box→ 图片可用宽度 = 容器总宽 - 40px，但max-width: 100%仍按“总宽”算，导致高度计算错位 -
img是inline元素，默认带底部空白，height: auto会包含这行内间隙，视觉上像被压扁 - Flex/Grid 容器中，没设
min-width或flex-shrink: 0，小屏下轨道收缩过度，max-width: 100%失去参照，算出来是0px
实操建议：给img加display: block消除间隙；父容器避免padding和width: 100%共存，改用margin外扩；若必须用padding，则显式写width: calc(100% - 40px)对齐。
想用object-fit: cover裁剪填满，但没效果
不是属性写错了，是浏览器根本没“框”可填。object-fit只决定图怎么填进已知尺寸的容器，如果容器本身没宽高约束（比如只写了width: 100%，高度塌陷），那它就完全不生效，图片照常按原始尺寸撑开。
立即学习“前端免费学习笔记（深入）”；
必须同时满足三个条件：
- 容器有明确宽高比：现代方案用
aspect-ratio: 4 / 3，老浏览器用padding-bottom: 75%+position: relative -
img设width: 100%+height: 100%（不能用max-width混搭） +display: block - 父容器加
overflow: hidden，否则裁剪部分会溢出边框
别漏掉object-position：默认center center会切掉人脸或Banner文字，人像优先用object-position: center top，底部有文字的用object-position: center bottom。
移动端 Safari 真机一跑就变形，哪里漏了？
iOS Safari 13.3 及更早版本根本不支持object-fit在img上生效，加-webkit-object-fit也无效，直接退化成fill（拉伸）。这不是样式没加载，是渲染引擎级缺失。
验证和兜底方法：
- 用 JS 检测：
'objectFit' in document.documentElement.style，不支持时动态替换为background-image方案 - 用
@supports (object-fit: cover)包裹样式，再写降级规则，比如img { width: 100%; height: auto; } - 背景图方案虽兼容好，但会丢
alt、SEO 和原生loading="lazy"，关键图慎用
真机调试前必查三点：容器是否锁了aspect-ratio或padding-bottom；object-position有没有配cover一起用；Safari 版本是否低于 13.3 —— 这三处松动，图片立刻崩形。
