长图响应式核心是按容器宽度等比缩放+高度弹性适配+分段加载或裁剪。一、纯内容长图用max-width:100%+height:auto+宽度受限容器；二、全屏沉浸式用aspect-ratio+object-fit；三、超长图需切图分段、srcset适配DPR、懒加载。
长图（如竖版海报、信息长图、步骤引导图）在H5中既要保证小屏能完整查看不需横向滚动，又要在大屏上不被过度拉伸或留白过多，关键不是“强行缩放”，而是**按容器宽度等比缩放 + 容器高度弹性适配 + 必要时分段加载或裁剪控制**。下面分三类场景讲清楚怎么做。
一、纯内容长图：用 max-width + height: auto + 宽度受限容器
适用于图文混排、运营长页等以阅读为主、允许纵向滚动的场景。
-
必须同时写：
max-width: 100%和height: auto，否则会变形或塌陷 - 父容器不能是空 div 或直接挂在
下；推荐套一层带width: 100%或max-width: 100%的 wrapper - 小屏下图片自动缩到容器宽度，高度按原始比例计算（比如原图 375×2000，缩到 375px 宽，高就是 2000px）；大屏下最多撑满视口宽度，不会模糊
- 避免写
width: 100%——它会把小图也拉满，导致图标级图片糊掉
二、全屏沉浸式长图：用 aspect-ratio + object-fit 控制容器比例
适用于首屏长背景、品牌视觉页等要求“占满视口但不拉伸失真”的场景。
- 给图片外层容器设
aspect-ratio: 原图宽 / 原图高（例如 375/2000 ≈ 1 / 5.33），再加width: 100vw - 图片本身设
width: 100%; height: 100%; object-fit: contain;，确保完整显示且居中 - 小屏：容器高度变小，图片按比例缩小并居中，上下可能留白（安全）
- 大屏：容器宽度变大，图片等比放大，仍保持清晰（因未拉伸，只缩放）
- 旧浏览器兼容？可用
padding-bottom替代aspect-ratio（如padding-bottom: 533%）
三、超长图（>3000px）性能与体验优化
纯靠 CSS 缩放无法解决加载慢、内存高、小屏卡顿问题，需配合资源策略：
- 切图分段：把长图拆成 3–5 张横向拼接图，用
<picture></picture>+<source></source>按视口高度加载对应段（例如media="(min-height: 800px)"） - srcset 配 DPR：提供 1x/2x/3x 版本，避免 iPhone 上发虚；
src必须保留作为兜底 - 懒加载 + 占位：长图区域用低清缩略图或骨架屏占位，滚动到视口再加载高清图
- 慎用 background-image：它不支持
srcset和语义化 alt，关键长图别用背景图实现
不复杂但容易忽略：长图响应式的核心，从来不是让一张图“适应所有屏幕”，而是让浏览器知道“这张图该占多宽、按什么比例算高、在什么设备下加载哪一版”。写对 max-width 和 height: auto 是底线，加上 aspect-ratio 和 srcset 才算完整。
