picture 标签配合 media 属性可基于屏幕方向精准控制图片资源加载，横屏匹配 (orientation: landscape)，竖屏匹配 (orientation: portrait)，未匹配时回退至 img；顺序影响匹配优先级，且需结合宽度、像素比等条件优化适配。

picture 标签配合 media 属性，能根据屏幕方向自动切换图片，比单纯用 CSS 媒体查询更精准——它控制的是资源加载，而非仅样式隐藏。

用 media 属性判断横竖屏

在 source 元素中使用 media 属性，值为 (orientation: landscape) 或 (orientation: portrait)，浏览器会按条件匹配并加载对应图片：

• 横屏（宽 > 高）时，匹配 media="(orientation: landscape)" 的 source
• 竖屏（高 > 宽）时，匹配 media="(orientation: portrait)" 的 source
• 未匹配到任何 source 时，回退到内部的 img 标签

基础写法示例

以下代码在横屏加载宽图，竖屏加载竖图，且都指定 srcset 和 sizes 以适配不同设备像素比：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

<picture>
  <source 
    media="(orientation: landscape)" 
    srcset="wide-800.jpg 1x, wide-1600.jpg 2x" 
    sizes="(max-width: 768px) 100vw, 800px">
  <source 
    media="(orientation: portrait)" 
    srcset="tall-600.jpg 1x, tall-1200.jpg 2x" 
    sizes="(max-width: 480px) 100vw, 600px">
  <img src="fallback.jpg" alt="描述文字">
</picture>

注意 fallback 和加载逻辑

浏览器从上到下解析 source，一旦匹配成功就停止后续匹配，所以顺序很重要：

立即学习“前端免费学习笔记（深入）”；

• 建议把最常用或最高优先级的条件放在前面（如先写 landscape，再写 portrait）
• img 必须存在，它是无匹配时的保底方案，也用于不支持 picture 的旧浏览器
• 不要依赖 CSS 的 display: none 来“隐藏”某张图——picture 机制本身就不下载未匹配的资源

结合 viewport 和实际场景优化

纯 orientation 判断有时不够精细（比如折叠屏展开后仍是竖屏尺寸），可叠加其他媒体条件：

• 加宽度限制：media="(orientation: landscape) and (min-width: 768px)"
• 加设备像素比：media="(orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)"
• 避免在桌面端误判：横屏 PC 通常不需要竖图，可加 and (max-height: 700px) 过滤小屏横屏