HTML <picture> tag
Definition og brug
<picture>
etiketten gør det mere fleksibelt for webudviklere at specificere billedressourcer.
<picture>
elementets mest almindelige brug er i responsiv design til kunstnerisk retning. Det er muligt at designe flere billeder for bedre at udfylde browserens viewport, i stedet for at lade et billede skaleres i forhold til viewportens bredde.
<picture>
element indeholder to etiketter: en eller flere <source>-etiket og en <img>-etiket.
Browseren vil søge efter den første <source>-element, der matcher med medieundersøgelsen og den nuværende viewport-bredde, og derefter vil den vise det korrekte billede (specificeret i srcset-attributten). <img>-elementet bruges som <picture>
Elementets sidste underelement er obligatorisk og bruges som en reservevalgmulighed, når ingen source-etiketter matcher.
Tip:<picture>
elementer fungerer på samme måde som <video> og <audio> Lignende. Du kan indstille forskellige kilder, og den første kilde, der passer til dine præferencer, vil blive brugt.
Læs også:
HTML undervisning:HTML <picture> element
CSS undervisning:CSS responsiv design - billeder
Eksempel
<picture>
Brugsmetoden for tagget:
<picture> <source media="(min-width:650px)" srcset="flowers-1.jpg"> <source media="(min-width:465px)" srcset="flowers-2.jpg"> <img src="flowers-3.jpg" alt="Flowers" style="width:auto;"> </picture>
Globale egenskaber
<picture>
Tagget understøtter også Globale egenskaber i HTML.
Event egenskaber
<picture>
Tagget understøtter også Event egenskaber i HTML.
Browser support
Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter dette tag.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
38.0 | 13.0 | 38.0 | 9.1 | 25.0 |