图片在移动端撑满宽度且不溢出需同时设置max-width: 100%、height: auto和父容器明确宽度，并加display: block消除底部空白；内联宽高属性会覆盖CSS，须清除或用属性选择器强制重置。
图片在移动端撑满宽度但不溢出
直接给 <img> 加 width: 100% 不够，它会拉伸变形或超出容器。真正起作用的是三件套：max-width: 100%、height: auto、父容器有明确宽度（比如 body 或带 width 的 div）。
-
max-width: 100%确保图片不会宽过父容器，是“不溢出”的关键 -
height: auto保持原始宽高比，避免压扁或拉长 - 别忘了给父级加
box-sizing: border-box，否则 padding/border 可能导致实际宽度超限
CSS写法必须包含的最小规则
只靠 HTML 属性（如 width="100%"）已不可靠，现代方案全靠 CSS。下面这段是最低限度有效代码：
img {
max-width: 100%;
height: auto;
display: block;
}
display: block 是为了消除图片默认的基线对齐（baseline）带来的底部空白——这个空白在响应式布局里经常导致意外留白或高度错位。
需要适配 Retina 屏时怎么办
单纯 max-width: 100% 在高 DPI 屏上会模糊。得配合 srcset 提供多倍图：
立即学习“前端免费学习笔记（深入）”；
<img src="photo.jpg"
srcset="photo.jpg 1x, photo@2x.jpg 2x"
alt="描述">
注意两点：
-
srcset中的1x/2x是设备像素比，不是文件名后缀强制要求；photo@2x.jpg只是常见命名习惯 - 如果用
<picture>做更精细控制（比如不同屏幕宽度加载不同尺寸图），max-width: 100%依然要写在 CSS 里，不能省
嵌入富文本或 CMS 输出时的兼容处理
很多 CMS（如 WordPress、Notion 导出）会自动给 <img> 加内联 width/height，这会覆盖 CSS 的 max-width。解决方法只有两个：
- 用
!important强制覆盖：max-width: 100% !important（慎用，但此时最直接） - 改用属性选择器清除内联尺寸：
img[width] { width: auto !important; }，同时保留max-width: 100%
实际项目中，后者更稳妥——因为有些老浏览器不支持 !important 在某些上下文中的行为。
