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"，就会退化为加载大图——即使你只在手机上看。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

换构图或强控格式：picture + source

当需要彻底不同的视觉呈现时， 是唯一解：

• 移动端裁人脸特写，桌面端展全景横图
• 优先加载 WebP/AVIF，不支持时降级到 JPG
• 按设备类型（如打印机）、分辨率、视口宽度等多条件组合匹配

的 media 和 type 是 AND 关系，顺序决定优先级。必须把最具体的规则放前面，最后用 兜底，并确保它有 src 和 alt。

装饰性图片：背景图 + 媒体查询

横幅、封面等非内容型图像，适合用 CSS 背景图处理：

• 用 background-size: cover 或 contain 控制填充方式
• 配合媒体查询切换不同尺寸/构图的图：
  @media (min-width: 768px) { .hero { background-image: url('hero-desktop.jpg'); } }

注意：关键插图不能依赖背景图，因为语义缺失、无法被屏幕阅读器识别，也不支持 srcset 等原生响应逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！