box-sizing: border-box本身不会导致图片拉伸变形，问题在于其与max-width: 100%的参照基准不一致——当父容器有padding/border时，“100%”仍按content区计算，而border-box压缩了内容空间，height: auto据此反推高度致比例失真；需确保父容器宽度明确、避免padding干扰，并配合img { max-width: 100%; height: auto; display: block; }及合理布局约束。
为什么box-sizing: border-box会让图片拉伸变形
很多人给父容器加了box-sizing: border-box，本意是统一盒模型，结果图片反而在小屏下被压扁或撑出边界。这不是border-box的问题，而是它放大了另一个隐藏矛盾：当父容器有padding或border时，max-width: 100%的“100%”到底参照谁？默认情况下，它仍按content-box逻辑算内容区宽度，但border-box把padding和border塞进了设定的宽高里——图片实际可用空间变小，而height: auto又按这个被压缩的空间反推高度，比例就崩了。
max-width: 100%必须配合box-sizing上下文一致
关键不是禁用box-sizing: border-box，而是让它的作用范围和图片的尺寸基准对齐：
- 给图片的**直接父容器**设
box-sizing: border-box，并显式声明width（比如width: 100%或具体值） - 避免在该父容器上同时设
padding+width: 100%；若需内边距，改用margin包在外层，或把padding移到更外层容器 - 如果父容器有
border，且希望图片紧贴内侧边缘，确认max-width: 100%生效时，浏览器计算的是border-box总宽度——这要求父容器本身也受控于一个明确的width上下文（例如在flex容器中设flex: 1，而非依赖auto）
图片自身别被height或aspect-ratio冲突覆盖
即使父容器盒模型正确，以下写法仍会导致拉伸：
-
img { width: 100%; height: 200px; }—— 硬高度直接破坏 intrinsic aspect ratio -
img { width: 100%; aspect-ratio: 16 / 9; }——aspect-ratio作用于img自身，但它会和height: auto冲突，优先级不如height属性，部分浏览器可能忽略 - 父容器用了
aspect-ratio但没配object-fit—— 容器有比例，图片仍按默认object-fit: fill拉伸填满
稳妥组合是：img { max-width: 100%; height: auto; display: block; }，且确保其父容器不施加任何强制高度或冲突的aspect-ratio。
立即学习“前端免费学习笔记（深入）”；
移动端真机调试时最常漏的三点
开发时在桌面 Chrome 看着正常，一到手机 Safari 就变形，往往卡在这几个细节：
- 父容器用了
flex或grid，但没设min-width/min-height，导致小屏下轨道收缩过度，max-width: 100%失去参照 - 图片加载前 DOM 已渲染，浏览器按
0×0占位，height: auto来不及响应——此时加aspect-ratio或height: 100%（配合object-fit）比纯height: auto更稳 - Safari 15.3 及更早版本不支持
aspect-ratio，若你用它做容器约束，又没 fallback（如padding-tophack），小屏下容器高度塌陷，图片立刻拉伸
真正要盯住的，从来不是某一行 CSS 对不对，而是整个尺寸链是否闭环：从视口 → 父容器宽高 → 图片可用空间 → max-width参照系 → height: auto计算依据。
