窄屏下图片撑破容器的解决核心是设置 max-width: 100% 和 height: auto；多图布局推荐 flex + flex-wrap；真正智能缩放需配合 srcset 与 sizes 实现按需加载。
窄屏下图片撑破容器的典型表现
直接写 <img src="x.jpg"> 在手机上会默认按原尺寸渲染，宽度超屏、左右滑动、文字被挤到一边——这不是 bug，是浏览器对未设约束图片的默认行为。关键不是“怎么让图片变小”，而是“怎么告诉浏览器：你得守规矩”。
max-width: 100% 是必须加的底线规则
不加这句，其他所有缩放逻辑都无效。它让图片最大宽度不超过父容器，同时保持宽高比（height: auto 默认生效）。常见错误是只写 width: 100%，结果图片在不同尺寸下被强行拉伸变形。
实操建议：
- 给所有图片统一加 CSS：
img { max-width: 100%; height: auto; } - 如果用
<picture>或<source>，每张<img>子元素仍需单独加该样式 - 避免在行内 style 里写
width或height固定值，会覆盖max-width
多图横向排列时，display: flex 比 float 更可靠
用 float 做多图布局，在窄屏下容易换行错乱、父容器高度塌陷；flex 能自动处理换行、间距和对齐，且支持 flex-wrap: wrap 让图片随屏幕宽度折行。
立即学习“前端免费学习笔记（深入）”；
示例结构：
<div class="gallery"> <img src="a.jpg"> <img src="b.jpg"> <img src="c.jpg"> </div>
对应 CSS：
.gallery {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.gallery img {
max-width: 100%;
height: auto;
flex: 1 1 calc(50% - 0.5rem); /* 两列，留出 gap 空隙 */
}注意：flex: 1 1 calc(...) 中的 calc() 必须用减法预留 gap，否则三图在中等屏可能强行挤成一行导致溢出。
需要真正“智能缩放”就得用 srcset + sizes
仅靠 CSS 缩放，图片文件还是全量下载——小屏加载 4K 图，浪费流量又拖慢首屏。真正的智能缩放，是让浏览器根据设备像素比和视口宽度，选最合适的图源。
实操要点：
-
srcset列出多个分辨率版本，用x描述设备像素比（如small.jpg 1x, small@2x.jpg 2x）或用w描述图片固有宽度（如medium.jpg 800w） -
sizes告诉浏览器：“在不同视口宽度下，这张图大概会占多宽”，例如sizes="(max-width: 768px) 100vw, 50vw" - 必须保留
src作为降级 fallback，否则老浏览器无法显示
完整示例：
<img src="default.jpg" srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 33vw" alt="描述文字">
复杂点在于 sizes 的断点要和你的 CSS 布局一致；容易被忽略的是，srcset 中的 w 单位指的是图片原始宽度，不是显示宽度——填错会导致浏览器选错图源。
