<picture>标签的media属性不支持orientation查询，(orientation: landscape)等写法会被浏览器忽略并回退至<img>；正确方案是结合CSS媒体查询控制显隐、matchMedia监听方向变化并手动更新，确保横竖屏加载不同构图图片。
picture标签怎么根据屏幕方向切换图片
直接用 <picture> 本身无法监听横竖屏变化，它只在页面加载或尺寸重排时静态匹配一次。真要实现“横屏用A图、竖屏用B图”，必须配合 matchMedia + orientation 媒体查询，且需手动响应方向变更事件。
media属性里写orientation: landscape有效吗
无效。<source> 的 media 属性不支持 orientation（这是 CSS 媒体查询里的特性，但 HTML <picture> 只支持部分媒体特性，orientation 被明确排除）。下面这些写法都**不会生效**：
<source media="(orientation: landscape)" srcset="wide.jpg"> <source media="(orientation: portrait)" srcset="tall.jpg">
浏览器会忽略这类 media 值，直接 fallback 到 <img> 或下一个匹配的 <source>。
正确做法：用CSS媒体查询 + display控制 + JS监听方向变更
核心思路是：准备两套 <img>（或两个 <source> 对应不同 srcset），用 CSS 控制显隐，再用 JS 监听 orientationchange 或更可靠的 matchMedia 变化。
立即学习“前端免费学习笔记（深入）”；
- 给横屏图加 class
landscape-only，竖屏图加portrait-only - CSS 中用
@media (orientation: landscape)显示前者、隐藏后者 - JS 里用
matchMedia("(orientation: landscape)")监听变化，并主动触发一次更新（因为有些设备旋转时不触发resize） - 注意：iOS Safari 对
orientationchange事件支持不稳定，优先用matchMedia
示例结构：
<div class="responsive-img"> <img src="tall.jpg" alt="竖屏图" class="portrait-only"> <img src="wide.jpg" alt="横屏图" class="landscape-only"> </div>
CSS：
@media (orientation: landscape) {
.portrait-only { display: none; }
.landscape-only { display: block; }
}
@media (orientation: portrait) {
.landscape-only { display: none; }
.portrait-only { display: block; }
}
为什么不用object-fit或CSS transform强行拉伸同一张图
虽然简单，但实际体验差：
- 横竖屏宽高比差异大时，
object-fit: cover会裁掉关键内容（比如人脸、文字区域） - 用
transform: rotate(90deg)旋转整张图会导致布局重排错乱，且无法解决分辨率适配问题 - 原生
<picture>的优势（如 DPR 切换、格式降级）全丢失 - 服务端或构建时生成两套图资源成本可控，而客户端强拉伸是纯负优化
真正需要横竖屏差异化展示时，图源分离 + 媒体查询控制 + JS 补充监听才是可靠路径。别省那几行 JS —— 方向变化不是 CSS 能自动响应的边界场景。
