Question

我想使用<picture>标签投放自适应图像。

我想要实现的是：

如果视口为x，则为浏览器“ a.webp”提供服务；如果不支持webp，则为“ a.png”提供服务；如果视口为y，则为浏览器“ b.webp”提供服务；如果不支持webp，则为“ b.png”提供服务。

我尝试了几种方法，但它们似乎没有用。有什么想法吗？

<picture>
  <source media="(min-width: 1125px) 1125px, 100vw" srcset="img/phone/happy_girl_top-phone.webp 414w, img/happy_girl_top.webp 1125w">
  <source media="(min-width: 1125px) 1125px, 100vw" srcset="img/phone/happy_girl_top-phone.png 414w, img/happy_girl_top.png 1125w">
  <img class="img-fluid" alt="top background" src="img/happy_girl_top.png">
</picture>

Answer 1

您的media属性的内容无效media queries。

这是嵌入内容的官方HTML文档：https://html.spec.whatwg.org/multipage/embedded-content.html

<picture>元素的语法应如下所示：

body {margin: 0;}

<picture>
  <source srcset="https://via.placeholder.com/414x200 414w" 
          media="(max-width: 414px)">
  <source srcset="https://via.placeholder.com/800x200 800w" 
          media="(max-width: 800px)">
  <source srcset="https://via.placeholder.com/1150x200 1150w" 
          media="(min-width: 801px)">
  <img class="img-fluid" alt="top background" src="https://via.placeholder.com/1125x200">
</picture>

在<picture>标签中组合不同类型和大小

1 个答案: