怎么在HTML里写picture自适应-html教程-PHP中文网

最常见的原因是缺失或位置错误；必须以含src的结尾，否则不触发资源选择，匹配失败时直接空白；其他原因包括media漏括号、srcset路径404、断点重叠及type与media顺序不当。

怎么在html里写picture自适应

为什么写了 `<picture></picture>` 却只加载一张图

最常见的原因是 <img> 缺失或位置错——<picture></picture> 必须以 <img> 结尾，且它必须有 src 或 srcset，否则整个结构不触发资源选择逻辑。浏览器不匹配任何 <source></source> 时，就靠它兜底；连它都没有，图片直接空白。

其他高频卡点：

<source></source> 的 media 条件写错，比如写成 media="max-width: 768px"（漏了括号），浏览器直接忽略该 <source></source>
srcset 里路径 404，浏览器静默跳过该 <source></source>，继续往下找，最后可能落到错误的 <img> 上
多个 <source></source> 的 media 范围重叠（如一个写 (max-width: 768px)，另一个写 (max-width: 1024px)），浏览器取第一个匹配项，后面全被跳过
缓存没清，改了 HTML 但浏览器还在用旧的 <source></source> 列表

`<source></source>` 的 `media` 和 `srcset` 怎么配才有效

media 只管“在哪种视口宽度下启用这张候选”，srcset 管“这张候选本身有哪些分辨率可选”。两者分工明确，不能混用逻辑。

正确写法示例：

<picture><source media="(max-width: 480px)" srcset="hero-sm.jpg, hero-sm@2x.jpg 2x"><source media="(min-width: 481px) and (max-width: 1023px)" srcset="hero-md.jpg, hero-md@2x.jpg 2x"><source media="(min-width: 1024px)" srcset="hero-lg.jpg, hero-lg@2x.jpg 2x">
  @@##@@
</source></source></source></picture>

注意：

srcset 中的 2x 描述符只在 <img src="hero-lg.jpg" alt="封面图"> 标签上生效；<source></source> 里的 2x 浏览器会忽略，但它仍能被解析为多图候选（只要路径存在）
想让高 DPR 设备真加载双倍图，得把 2x 放在最外层 <img> 的 srcset 里，且不能带 sizes
media 值必须是完整媒体查询，不能省略括号，也不能写成像素值如 768px

怎么让 `<picture></picture>` 同时适配格式、尺寸和 DPR

三者不能塞进同一个 <source></source>，得按优先级分层：格式降级 > 宽度断点 > 密度切换。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

推荐结构：

<picture><!-- 先试 AVIF（现代格式）--><source type="image/avif" srcset="hero.avif, hero@2x.avif 2x"><!-- 再试 WebP --><source type="image/webp" srcset="hero.webp, hero@2x.webp 2x"><!-- 最后按宽度分档的 JPG --><source media="(max-width: 480px)" srcset="hero-sm.jpg"><source media="(min-width: 481px) and (max-width: 1023px)" srcset="hero-md.jpg"><source media="(min-width: 1024px)" srcset="hero-lg.jpg"><!-- 兜底 img：必须含 src，且可加 srcset 实现 DPR 切换 -->
  @@##@@
</source></source></source></source></source></picture>

关键点：

浏览器从上到下检查 type，首个支持的 MIME 类型即被采用，后面的全跳过
格式不支持时，才进入 media 分支；所以 type <source></source> 要放在最前面
<img> 的 srcset 是唯一能真正响应 DPR 的地方，前提是它没配 sizes

验证 `<picture></picture>` 是否按预期工作

别信控制台打印的 window.devicePixelRatio，也别靠肉眼猜——实际加载哪张图，只看 Network 面板。

操作步骤：

打开 Chrome DevTools → Network → Filter 选 Img
刷新页面，找到对应图片请求
右键 → Copy → Copy image src，粘贴进新标签页确认 URL
切到 DevTools → ⚙️ → Sensors → Device pixel ratio，设为 1 或 2，然后 **强制刷新（Ctrl+Shift+R）**
对比两次 Network 请求的文件名，确认是否切换了 @2x 版本

容易被忽略的一点：<picture></picture> 不解决 CSS 渲染问题。即使加载了 1200×800 的 @2x 图，如果 img 被 CSS 设了固定 width: 300px; height: 200px，照样模糊——max-width: 100%; height: auto 仍得加上。