HTML网页中picture标签的定义以及基本编写格式-html教程-PHP中文网

是决策容器，通过按 media、type、srcset 匹配条件选择资源，最终由内部渲染；它支持艺术指导、格式降级、dpr 适配，而的 srcset+sizes 仅支持尺寸/密度切换。

html网页中picture标签的定义以及基本编写格式

picture 标签不是用来直接显示图片的，它是一个决策容器，只负责告诉浏览器“在什么条件下该用哪张图”，最终渲染仍由内部的 <img> 完成。

为什么不能只用 `<img>`？

当需要满足以下任一场景时，<picture></picture> 就不可替代：

同一内容在手机上要竖构图、桌面要横构图（艺术指导）
想优先用 image/avif，但必须兼容老浏览器显示 image/jpeg
既要按屏幕宽度选图，又要按设备像素比（1x/2x）选分辨率，还要按格式支持做降级

而 <img> 的 srcset + sizes 只能解决“同一构图、不同尺寸/密度”的问题，没法换裁剪、换格式、换语义。

`<source></source>` 的匹配顺序和 fallback 机制

浏览器从上到下逐个检查 <source></source>，一旦遇到 media 匹配且 type 支持的条目，就停止并加载它的 srcset；如果所有 <source></source> 都不满足条件，或浏览器根本不认识 <picture></picture>（如 IE），就会退回到末尾那个 <img>。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

media 是 CSS 媒体查询字符串，比如 "(min-width: 768px)"，不写则无条件匹配
type 必须是标准 MIME 类型，比如 "image/webp"，拼错或浏览器不支持就跳过
<img> 必须存在，且必须是 <picture></picture> 的最后一个子元素

一个兼顾宽度、格式、DPR 的最小可用示例

下面这段代码在现代浏览器中会优先加载 WebP 版本，小屏用窄图、大屏用宽图、Retina 屏自动选 2x：

<picture><source media="(max-width: 480px)" type="image/webp" srcset="hero-sm.webp 1x, hero-sm@2x.webp 2x"><source media="(min-width: 481px)" type="image/webp" srcset="hero-lg.webp 1x, hero-lg@2x.webp 2x"><source media="(max-width: 480px)" srcset="hero-sm.jpg 1x, hero-sm@2x.jpg 2x"><source media="(min-width: 481px)" srcset="hero-lg.jpg 1x, hero-lg@2x.jpg 2x">
  @@##@@
</source></source></source></source></picture>

注意：四个 <source></source> 是两组并列策略（WebP 一组、JPEG 一组），每组内靠 media 区分宽度，靠 srcset 中的 1x/2x 区分 DPR；浏览器不会“合并计算”，只取第一个完全匹配的。

容易被忽略的关键点

<picture></picture> 不感知容器宽度，只认视口宽度（media）或格式支持（type）；如果你的图片放在一个固定宽 300px 的卡片里，但视口是 1920px，它依然会加载大图——这种场景得靠 JS 或 CSS 容器查询（@container）配合 <img src="hero-lg.jpg" alt="产品主视觉"> 的 sizes 来解，<picture></picture> 本身做不到。