图片拉伸变形的根本原因是width/height硬值覆盖原始宽高比，object-fit依赖明确尺寸才生效，box-sizing: border-box又可能压缩可用空间；修复关键在于切断冲突链而非堆叠属性。
图片拉伸变形不是样式没写对，而是浏览器在多个尺寸约束间“选错了优先级”——width和height硬值会直接覆盖原始宽高比，object-fit又依赖容器有明确尺寸，box-sizing: border-box则可能悄悄压缩了图片可用空间。修复关键在于切断冲突链，而不是堆叠属性。
为什么max-width: 100% + height: auto有时仍失效
这组组合本身正确，但常被其他规则覆盖或干扰：
-
img元素上存在内联height（如height="200"）或CSS中写了height: 200px，它会强制覆盖height: auto - 父容器用了
flex且未设align-items，默认stretch会把img垂直撑满，压扁比例 - 父容器有
padding或border，而box-sizing: border-box已启用，此时max-width: 100%仍按content区计算，实际可用宽度变小，height: auto据此反推高度 → 比例失真 - 父容器
width为auto（比如display: inline-block未设宽），100%失去参照基准
object-fit: cover/contain为何不生效
不是属性写错，是浏览器根本没“框”可填：
- 只给
img设width: 100%，但父容器height为auto或未设aspect-ratio→ 容器高度塌陷，object-fit无作用域 -
img自身写了max-width: 100%+height: auto，与object-fit所需height: 100%冲突，导致高度计算逻辑打架 - 父容器用了
float未清除，或position: absolute脱离文档流，img渲染时找不到有效父高 - Safari 13.3 及更早版本完全不识别
object-fit在img上的声明，加-webkit-object-fit也无效，会退化为fill行为
如何让aspect-ratio真正起作用
aspect-ratio只管容器形状，不管图片怎么填进去：
- 仅设
.container { aspect-ratio: 4 / 3; width: 100%; }不够——图片仍按默认object-fit: fill拉伸填满 - 必须显式给
img加object-fit: cover或contain，否则aspect-ratio只是画了个框，里面还是拉伸的图 - 老浏览器（Safari 15.3 及更早）不支持
aspect-ratio，得用padding-bottomhack：容器设position: relative，padding-top: calc(3 / 4 * 100%)，img设position: absolute并top: 0; left: 0; width: 100%; height: 100% - 若父容器本身是
flex子项，需额外加min-width: 0防止img被flex-shrink压缩到宽度为0，导致height: auto失效
移动端真机调试最容易漏的三点
桌面 Chrome 正常 ≠ 手机 Safari 正常：
- Flex 容器中未设
min-height或height: 100%，小屏下轨道收缩过度，max-width: 100%失去参照 - 父容器用了
background-image+background-size: cover，却忘了配background-position，人物脸被裁掉一半 - 写了
object-fit: cover，但没配object-position: center top等微调值，在竖屏下默认居中裁剪直接切掉人脸或Banner文字
真正卡点不在语法，而在层级关系——img的尺寸由最近一层有明确宽高的父容器决定，而这个“明确”必须是计算后非auto的值。任何中间环节出现width: auto、height: auto、未清除的float或未约束的flex，都会让整个链路失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
