HTML响应式图片关键在于让浏览器预加载匹配尺寸和格式的资源：用max-width:100%+height:auto保比例；srcset+sizes按布局选图；picture+source换构图或格式；装饰图用CSS背景图。
HTML图片在不同设备上正确显示，关键不是“拉伸一张图凑合用”，而是让浏览器在加载前就选对尺寸和格式。只靠 width: 100% 或单纯 CSS 缩放，会导致小屏下载大图、浪费带宽、加载慢，甚至变形失真。
基础缩放：防溢出 + 保比例
这是所有响应式图片的底线，必须同时设置：
- max-width: 100%：确保图片宽度不超过父容器，不撑破布局
- height: auto：强制按原始宽高比缩放，避免压扁或拉长
别用 width: 100% 替代 —— 它会强行拉宽小图，破坏比例。如果父容器是 flex 项，记得加 min-width: 0，否则 flex 默认的 min-width: auto 会卡住图片收缩。
按布局宽度选图：srcset + sizes（推荐主力方案）
当图片在不同断点下占容器的宽度不同（比如手机全宽、桌面半宽），用这个组合最精准高效：
立即学习“前端免费学习笔记（深入）”；
-
srcset列出多个固有宽度的图，如"photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w" -
sizes告诉浏览器“这张图在当前布局里大概多宽”，例如：sizes="(max-width: 768px) 100vw, 50vw"（小屏占满视口，大屏占一半）
浏览器结合两者，计算出所需渲染像素，自动下载最匹配的资源。漏写 sizes，或写成死值 "100vw"，就会退化为加载大图——即使你只在手机上看。
换构图或强控格式：picture + source
当需要彻底不同的视觉呈现时，<picture></picture> 是唯一解：
- 移动端裁人脸特写，桌面端展全景横图
- 优先加载 WebP/AVIF，不支持时降级到 JPG
- 按设备类型（如打印机）、分辨率、视口宽度等多条件组合匹配
<source></source> 的 media 和 type 是 AND 关系，顺序决定优先级。必须把最具体的规则放前面，最后用 <img alt="HTML怎么设置图片在不同的设备屏幕上显示" > 兜底，并确保它有 src 和 alt。
装饰性图片：背景图 + 媒体查询
横幅、封面等非内容型图像，适合用 CSS 背景图处理：
- 用
background-size: cover或contain控制填充方式 - 配合媒体查询切换不同尺寸/构图的图：
@media (min-width: 768px) { .hero { background-image: url('hero-desktop.jpg'); } }
注意：关键插图不能依赖背景图，因为语义缺失、无法被屏幕阅读器识别，也不支持 srcset 等原生响应逻辑。
