直接给<img>设置max-width: 100%并配合height: auto即可解决小屏幕裁切或溢出问题，确保图片等比缩放且不撑破布局。
图片在小屏幕被裁切或溢出容器怎么办
直接给 <img> 设置 max-width: 100% 就能解决。它让图片宽度最多等于其父容器宽度，超出时自动等比缩小，不会撑破布局。注意必须同时设 height: auto，否则高度可能塌陷或拉伸失真。
为什么只写 max-width: 100% 不够
常见错误是漏掉关键配套样式，导致响应失效：
-
width或height被其他 CSS 强制固定（比如 Bootstrap 的.img-fluid之外又写了width: 300px） - 父容器没设置宽度（如
div默认width: auto，但若内部有float或display: flex未清空，实际宽度可能为 0） - 图片被包裹在
figure或自定义组件里，而该容器设置了overflow: hidden但没给宽高约束
max-width: 100% 和 width: 100% 的区别
这是最容易混淆的点：
-
max-width: 100%：图片原始尺寸小于容器时保持原大小；大于时才缩放——适合多数场景 -
width: 100%：无论原始多大，一律拉满父容器宽度，可能导致小图被强行放大、模糊 - 如果图片需“始终填满容器”，且你控制得了源图分辨率，再考虑
object-fit: cover+width: 100%; height: 100%，但这是另一类需求
需要适配高清屏（Retina）时怎么加 srcset
max-width 只管布局缩放，不解决像素密度问题。要在视觉上清晰，得配合 HTML 的 srcset：
立即学习“前端免费学习笔记（深入）”；
<img src="photo.jpg"
srcset="photo.jpg 1x, photo@2x.jpg 2x"
alt="示例">
注意两点：
-
srcset中的1x/2x是设备像素比，不是文件名后缀强制规则；实际可用photo-400w.jpg 400w这类宽度描述符 - 仍要保留
max-width: 100%; height: auto，否则高倍图加载后可能因原始尺寸过大而溢出
真正卡住人的往往不是 max-width 本身，而是它和父容器、图片原始尺寸、以及 srcset 加载逻辑之间的隐式依赖。调的时候建议先禁用所有 JS，纯 CSS 下看图片是否随视口缩放，再逐步加功能。
