<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> 

this example我實現它是這樣：

<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>