max-width: 100%能防撑破容器但不保宽高比，需配合height: auto、父容器尺寸约束及object-fit等协同解决变形问题。
图片在响应式里被拉伸变形，max-width: 100%真能解决？
能，但只加这一行往往不够——它只管“不撑破容器”，不管“是否保持宽高比”或“父容器有没有明确尺寸”。常见现象是：小屏幕下图片高度塌陷、文字重叠，或者图片被强制压缩成矮胖/瘦高状。
根本原因是：max-width: 100%只限制宽度上限，不控制高度；而默认是
height: auto，但前提是父容器有可参考的高度或宽高比上下文。一旦父容器高度由内容撑开（比如空div），height: auto就失去参照，浏览器可能按原始尺寸渲染或退化处理。
- 必须同时设置
height: auto（显式写出来，别依赖默认） - 父容器不能是
height: 0或display: flex且未设align-items的情况，否则子元素高度计算异常 - 如果图片是背景图，
max-width完全无效，得用background-size: contain或cover
为什么有时加了max-width: 100%还是变形？
典型场景是 Flex/Grid 布局中嵌套图片，或图片放在 position: absolute 的容器里。这时图片的“包含块”可能没尺寸，导致 max-width: 100% 实际计算为 0 或 NaN。
检查顺序建议：
- 用浏览器开发者工具看图片的 computed
width和max-width值，确认是不是真的算出了具体像素值 - 往上逐层检查父级是否设置了
width、flex-basis、grid-template-columns等影响尺寸的属性 - 特别注意
img是否被object-fit覆盖——它会接管缩放逻辑，让max-width失效
object-fit 和 max-width: 100% 能一起用吗？
能，而且经常要一起用。但它们分工不同：max-width: 100% 控制图片最大宽度不溢出容器；object-fit 控制图片内容如何适配这个框。
常用组合：
-
max-width: 100%; height: auto;→ 保持原始宽高比，等比缩放（最常用） -
max-width: 100%; height: 100%; object-fit: cover;→ 填满容器，可能裁剪（适合头图、卡片图） -
max-width: 100%; height: 100%; object-fit: contain;→ 完整显示，留白（适合图标、LOGO）
注意：object-fit 不支持 IE，如果需兼容，得用 background-image + background-size 替代。
响应式图片要不要删掉width和height属性？
HTML 中的 width 和 height 属性会触发浏览器提前预留空间，防止布局偏移（CLS）。但它们是固定像素值，在响应式里容易和 CSS 冲突。
稳妥做法：
- 保留 HTML
width/height属性（推荐用原始尺寸），再用 CSS 覆盖：width: 100%; height: auto; - 如果用
object-fit，必须删掉 HTML 的height，否则会锁定高度，object-fit失效 - 现代方案可考虑
srcset+sizes，但那是另一层优化，和max-width不冲突
真正容易被忽略的是：很多团队只改 CSS，却忘了清理旧的内联 width/height，结果样式表里写了 width: 100%，浏览器仍按 HTML 属性优先级渲染固定宽高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
