图片在移动端拉伸变形的直接原因是未切断width和height的强制绑定，应使用max-width:100%;height:auto;并清除内联宽高属性、避免flex默认拉伸、配合vertical-align等细节。
图片在移动端被拉伸变形的直接原因
根本不是 CSS 写得不够多，而是没切断 width 和 height 的强制绑定。很多开发者手动设了 width: 100%; 却忘了清除原始 height，浏览器就会按比例缩放失败，尤其在 iOS Safari 或 Android WebView 中更明显。
max-width: 100%; height: auto; 为什么能解决问题
这组组合不是“让图片变小”，而是告诉浏览器：“宽度最多占满父容器，高度请严格按原始宽高比自动计算”。关键在 auto —— 它会读取图片 intrinsic size（固有尺寸），而不是依赖 HTML 的 width/height 属性或 CSS 强制值。
- 如果图片原始是 800×600，父容器宽 320px，
max-width触发后宽度变为 320px，height: auto自动算出 240px - 若父容器宽 1200px，图片仍保持 800×600，不会被撑大（因为
max-width是上限，不是目标值） - 不写
max-width而只写width: 100%，图片会在窄屏上被强行拉宽，破坏比例
必须配合的 HTML 和 CSS 细节
光写那两个声明还不够，常见漏掉的点会直接让效果失效：
- 图片不能有内联
width或height属性，比如<img src="x.jpg" width="800" height="600">—— 这些属性会覆盖 CSS 的height: auto - 父容器不能是
display: flex且没设align-items: flex-start，否则 Flex 默认拉伸子项，图片会被强制撑高 - 如果用
<picture>+<source>，每个<img>标签仍需单独加max-width和height: auto - 在某些老版 Android 浏览器中，还需加
vertical-align: middle防止底部多出空白间隙
img {
max-width: 100%;
height: auto;
vertical-align: middle;
}
遇到响应式网格或 object-fit 场景怎么办
如果图片要填满一个固定宽高的卡片（比如 300×200 容器），max-width + height: auto 就不合适了——它只保比例，不保填充。这时候得换方案：
立即学习“前端免费学习笔记（深入）”；
- 用
object-fit: cover+ 明确设容器宽高，适合头图、封面图 - 用
object-fit: contain+background-image+background-size: contain，适合图标、logo 类需要完整显示的场景 - 绝对不要对图片本身设固定
height，否则在横屏 iPad 或折叠屏上必然变形
真正容易被忽略的是：同一张图片在不同上下文中可能需要两套规则 —— 一个是流式内容区（用 max-width），一个是卡片组件（用 object-fit），混用会导致不可预测的裁剪或留白。
