响应式图片需用 max-width: 100% + height: auto 防止拉伸变形；父容器应设 box-sizing: border-box；配合 srcset/sizes 按条件加载合适尺寸图；宽高比不匹配时可用 object-fit: cover/contain。
图片在不同屏幕下被拉伸或溢出容器
这是响应式图片最常见的表现：桌面端正常，手机上要么撑破父容器，要么被压缩变形。根本原因是没切断图片的“默认尺寸继承”——
解决方式就一条：强制图片宽度跟随容器，同时保留宽高比。关键不是设 width: 100%，而是用 max-width: 100% + height: auto：
img {
max-width: 100%;
height: auto;
}
-
max-width: 100%表示“最多占满父容器，但绝不超出”，小图不会被强行拉大 -
height: auto是必须配对的，否则浏览器可能保持原始高度导致变形 - 不要写
width: 100%单独使用——它会强制拉伸小图，模糊失真
父容器盒模型影响图片实际尺寸
很多人调好了 img 样式，但图片还是溢出，问题常出在父容器的 padding、border 或 box-sizing 上。CSS 默认是 content-box，此时 width: 100% 指的是内容区宽度，加上 padding 和 border 就超了。
稳妥做法是统一父容器的盒模型，并控制内边距逻辑：
- 给图片的直接父容器加
box-sizing: border-box - 避免在父容器上设
padding后再让img宽度为100%；改用padding在更外层，或用margin控制图片间距 - 如果父容器有
border，且希望图片紧贴边框内侧，必须确认max-width: 100%是相对于 border box 还是 content box（取决于父容器的box-sizing）
srcset 与 sizes 配合 max-width 才算完整响应式
仅靠 max-width 只解决了“怎么缩”，没解决“缩哪个图”。用户手机加载 4K 图再缩小，浪费带宽又拖慢首屏。
必须配合 HTML 的响应式属性，让浏览器自己选最合适的资源：
- 用
srcset提供多张不同分辨率的图，例如：srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w" - 用
sizes告诉浏览器“在什么条件下这张图大概占多宽”，例如：sizes="(max-width: 768px) 100vw, 50vw" -
max-width: 100%依然要写在 CSS 里，否则srcset选出来的图可能仍溢出容器
object-fit 替代方案：需要裁剪或居中时别硬撑
当图片宽高比和容器不一致，max-width + height: auto 会导致留白（比如竖图放在横容器里）。这时候不能靠 JS 算比例，要用 object-fit。
但注意兼容性：IE 完全不支持，旧版 Safari 需要 -webkit-object-fit。
- 想填满容器并裁剪多余部分：用
object-fit: cover，再配width: 100%; height: 100%，且父容器需设明确宽高 - 想完整显示、居中、留黑边：用
object-fit: contain - 切勿对
height: 100%却不设父容器高度——结果是高度塌陷，图片消失
图片响应式的真正难点不在样式本身，而在理解「谁决定尺寸」：是图片原始像素？父容器宽度？视口宽度？还是 srcset 中的媒体条件？这三个维度一旦混用，max-width 就会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
