<picture> Tag funktioniert nicht

Question

Ich fand heute über die <picture>-Tag, die mehrere Bildquellen für eine <img> ermöglicht. Ich folgte this example auf 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> 

Und ich setzte sie als solche:

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

Problem: Wenn ich die Bildschirmbreite auf weniger als 768px schrumpfen, key.png noch verwendet wird, keyclubsmall.png zu ignorieren, die <picture> sollte zu wechseln. Was mache ich falsch und was muss sich ändern?

Answer 1

Ich habe mein Problem behoben: <a> muss die gesamte <picture> wickeln, da nicht mehr die einzige Komponente für das Bild ist.

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