如何在picture标签中配置桌面端两张左右排布图片替换移动端单图

问题原因 #

你原写法不生效有两个核心原因：

1. <picture> 标签的 <source> 匹配规则是自上而下优先匹配，匹配到第一个符合media条件的资源后就会停止后续匹配，所以你写的两个min-width: 376px的<source>，只会生效第一个右侧svg，左侧资源会被直接忽略。
2. 原生<picture>标签本身仅支持单次渲染一张图片，无法同时输出两张图片实现左右布局。

解决方案 #

推荐用「容器+CSS媒体查询」的方式实现需求，兼容性更强，布局灵活度更高：

写法1：直接分模块控制显示隐藏（最常用）

HTML结构：

<div class="hero-image-container">
  <!-- 移动端单图 -->
  <img class="hero-img-mobile" src="./assets/illustration-hero-mobile.png" alt="hero-image">
  <!-- 桌面端左右双图 -->
  <div class="hero-img-group-desktop">
    <img src="./assets/illustration-hero-left.svg" alt="左侧装饰图">
    <img src="./assets/illustration-hero-right.svg" alt="右侧主视觉图">
  </div>
</div>

配套CSS：

/* 移动端默认样式 */
.hero-img-group-desktop {
  display: none;
}
.hero-img-mobile {
  display: block;
  width: 100%;
}

/* 桌面端断点切换 */
@media (min-width: 376px) {
  .hero-img-mobile {
    display: none;
  }
  .hero-img-group-desktop {
    display: flex;
    /* 可根据设计需求调整间距、对齐方式 */
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
}

写法2：保留picture标签的适配逻辑

如果需要保留picture的响应式资源适配能力（比如适配不同分辨率屏幕），可以拆分两个picture标签分别控制左右图：
HTML结构：

<div class="hero-image-container">
  <!-- 左侧图：仅桌面端加载显示 -->
  <picture class="hero-left">
    <source media="(min-width: 376px)" srcset="./assets/illustration-hero-left.svg">
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="">
  </picture>
  <!-- 右侧/主图：适配移动端和桌面端资源 -->
  <picture class="hero-right">
    <source media="(max-width: 375px)" srcset="./assets/illustration-hero-mobile.png">
    <source media="(min-width: 376px)" srcset="./assets/illustration-hero-right.svg">
    <img src="./assets/illustration-hero-mobile.png" alt="hero-image">
  </picture>
</div>

配套CSS：

@media (max-width: 375px) {
  .hero-left {
    display: none;
  }
}
@media (min-width: 376px) {
  .hero-image-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

内容的提问来源于stack exchange，提问作者simonemarketti