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>

Prøv det selv

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