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

問題：I未満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>