<picture> srcset 中的两个图像答案

【问题标题】：Two images in <picture> srcset<picture> srcset 中的两个图像
【发布时间】：2021-08-29 22:03:52
【问题描述】：

如何在图片标签中插入两个桌面版本的图像（一个在右侧，另一个在左侧）来替换唯一的移动版本？

我试过了，但是没用。

    <picture>
      <source media="(max-width: 375px)" srcset="./assets/illustration-hero-mobile.png">
      <source media="(min-width: 376px)" srcset="./assets/illustration-hero-right.svg">
      <source media="(min-width: 376px)" srcset="./assets/illustration-hero-left.svg">
      <img src="./assets/illustration-hero-mobile.png" alt="hero-image">
    </picture>

谢谢

【问题讨论】：

阅读：stackoverflow.com/questions/25202348/…
嗨，我看了，但这对我没有帮助：我必须在桌面版本中显示两张图像，而不是在移动版本中只显示一张，并且我的代码也只在桌面上显示一张版本
怎么不行？我已经测试了代码，它似乎可以工作。确保图像路径正确。

标签： html tags

【解决方案1】：

阅读这个： https://www.w3schools.com/tags/att_media.asp#:~:text=The%20media%20attribute%20specifies%20what 许多浏览器中的源元素不支持媒体。你可能想试试！这与 css。

<style>
@media screen and (max-width: 600px) {
    .desktop{
        display: none;
    }
}
@media only screen and (min-width: 600px) {
    .mobile{
        display: none;
    }
}

</style>
<picture>
  <img class="desktop" src="https://picsum.photos/id/237/200/300">
  <img class="desktop" src="https://picsum.photos/seed/picsum/200/300">
  <img class="mobile" src="https://picsum.photos/200/300?grayscale">
</picture>

【讨论】：