怎么在HTML中用picture标签实现横屏和竖屏的不同展示-html教程-PHP中文网

标签的media属性不支持orientation查询，(orientation: landscape)等写法会被浏览器忽略并回退至；正确方案是结合css媒体查询控制显隐、matchmedia监听方向变化并手动更新，确保横竖屏加载不同构图图片。

怎么在html中用picture标签实现横屏和竖屏的不同展示

picture标签怎么根据屏幕方向切换图片

直接用 <picture></picture> 本身无法监听横竖屏变化，它只在页面加载或尺寸重排时静态匹配一次。真要实现“横屏用A图、竖屏用B图”，必须配合 matchMedia + orientation 媒体查询，且需手动响应方向变更事件。

media属性里写orientation: landscape有效吗

无效。<source></source> 的 media 属性不支持 orientation（这是 CSS 媒体查询里的特性，但 HTML <picture></picture> 只支持部分媒体特性，orientation 被明确排除）。下面这些写法都**不会生效**：

<source media="(orientation: landscape)" srcset="wide.jpg"><source media="(orientation: portrait)" srcset="tall.jpg"></source></source>

浏览器会忽略这类 media 值，直接 fallback 到 <img> 或下一个匹配的 <source></source>。

正确做法：用CSS媒体查询 + display控制 + JS监听方向变更

核心思路是：准备两套 <img>（或两个 <source></source> 对应不同 srcset），用 CSS 控制显隐，再用 JS 监听 orientationchange 或更可靠的 matchMedia 变化。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

给横屏图加 class landscape-only，竖屏图加 portrait-only
CSS 中用 @media (orientation: landscape) 显示前者、隐藏后者
JS 里用 matchMedia("(orientation: landscape)") 监听变化，并主动触发一次更新（因为有些设备旋转时不触发 resize）
注意：iOS Safari 对 orientationchange 事件支持不稳定，优先用 matchMedia

示例结构：

<div class="responsive-img">
  @@##@@
  @@##@@
</div>

CSS：

@media (orientation: landscape) {
  .portrait-only { display: none; }
  .landscape-only { display: block; }
}
@media (orientation: portrait) {
  .landscape-only { display: none; }
  .portrait-only { display: block; }
}