<picture>標簽不起作用

Question

我今天發現了有關<picture>標簽的信息，該標簽允許<img>多個圖像源。 我在w3schools上遵循了這個示例

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

我這樣實現了它：

<picture>
  <source media="(max-width:768px)" srcset="img/keyclubsmall.png">
  <source srcset="img/key.png">
  <a href = "/"><img src = "img/key.png"></a>
</picture>

問題 ：當我縮小屏幕寬度為小於768px ， key.png仍然在使用，忽略keyclubsmall.png ，其<picture>應該切換到。 我做錯了什么，需要更改什么？

Answer 1

我解決了我的問題： <a>需要包裝整個<picture> ，因為<img>不再是圖像的唯一組成部分。

<a href = "/">
  <picture>
    <source media="(max-width:768px)" srcset="img/keyclubsmall.png">
    <source srcset="img/key.png">
    <img src = "img/key.png">
  </picture>
</a>