HTML <prent> Merker


Voorbeeld

Hoe om die <picture> tag te gebruik:

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

Definisie en gebruik

Die <picture>merker gee webontwikkelaars meer buigsaamheid om beeldbronne te spesifiseer.

Die mees algemene gebruik van die <picture>element sal wees vir kunsrigting in responsiewe ontwerpe. In plaas daarvan om een ​​prent te hê wat op of af geskaal word op grond van die uitsigpoortwydte, kan veelvuldige prente ontwerp word om die blaaieruitkykpoort mooier te vul.

Die <picture>element bevat twee merkers: een of meer <bron> merkers en een <img> merker.

Die blaaier sal die eerste <bron>-element soek waar die medianavraag by die huidige viewport-breedte pas, en dan sal dit die regte prent vertoon (gespesifiseer in die srcset-kenmerk). Die <img>-element word vereis as die laaste kind van die <picture>element, as 'n terugvalopsie as geen van die bronmerkers ooreenstem nie.

Wenk: Die <picture>element werk "soortgelyk" aan <video> en <klank>. Jy stel verskillende bronne op, en die eerste bron wat by die voorkeure pas, is die een wat gebruik word.


Blaaierondersteuning

Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die element ten volle ondersteun.

Element
<picture> 38.0 13.0 38.0 9.1 25.0

Globale eienskappe

Die <picture>merker ondersteun ook die Global Attributes in HTML .


Gebeurtenis eienskappe

Die <picture>merker ondersteun ook die gebeurteniskenmerke in HTML .


Verwante bladsye

HTML-handleiding: HTML <prent> Element

CSS-tutoriaal: CSS-responsiewe ontwerp - prente