直接给设max-width:100%和height:auto是最简有效方案，可防溢出变形并保持宽高比；仅用width:100%或漏height:auto会导致拉伸失真。
图片不随容器缩放，溢出或变形怎么办
直接给 <img alt="如何使用css制作基础的响应式图片_通过max-width和height:auto确保图片自适应" > 设置 max-width: 100% 和 height: auto 是最简有效的起点。这能强制图片宽度不超过父容器，同时保持原始宽高比。常见错误是只写 width: 100%——它会拉伸图片、破坏比例；或者漏掉 height: auto，导致高度被固定为初始值，缩放后严重失真。
为什么必须用 max-width 而不是 width
max-width: 100% 是“上限控制”：图片在小屏下收缩，在大屏下可保持原尺寸；而 width: 100% 是“强制填满”，无论原始尺寸多大都会撑满容器。实际场景中，一张 1200px 宽的图在手机上本该缩小，但 width: 100% 会让它像素级拉伸模糊，且无法还原清晰度。max-width 留出了“不放大”的安全边界。
需要适配 Retina 屏时怎么加 @2x 图
纯 CSS 无法自动切换 @2x，需配合 HTML 的 srcset 属性：
@@##@@
此时仍要保留 CSS 中的 max-width: 100% 和 height: auto，否则高倍图加载后可能因尺寸过大而溢出。注意：不要在 CSS 里用 background-image 模拟响应式图——它无法保证语义化和可访问性，也难以统一控制宽高比。
立即学习“前端免费学习笔记（深入）”；
图片容器有 padding 或 border 时容易踩的坑
如果父容器设置了 padding 或 border，而图片仅靠 max-width: 100%，可能因盒模型默认为 content-box 导致图片宽度超出可视区域。解决方案是：
- 给图片父容器加
box-sizing: border-box - 或给图片本身加
display: block（消除 inline 元素默认的底部空白） - 更稳妥的做法：父容器用
overflow: hidden做兜底
这些细节在移动端调试时经常暴露，尤其当图片嵌套在 flex 或 grid 容器中时，盒模型行为更容易被忽略。
