HTML <prent> Element
Die HTML <picture>-element laat jou toe om verskillende prente vir verskillende toestelle of skermgroottes te vertoon.
Die HTML <prent> Element
Die HTML <picture>-element gee webontwikkelaars meer buigsaamheid om beeldbronne te spesifiseer.
Die <picture>element bevat een of meer <source>elemente, elkeen verwys na verskillende beelde deur die srcset
kenmerk. Op hierdie manier kan die blaaier die prent kies wat die beste by die huidige aansig en/of toestel pas.
Elke <source>element het 'n
mediakenmerk wat definieer wanneer die prent die geskikste is.
Voorbeeld
Wys verskillende beelde vir verskillende skermgroottes:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Let wel: Spesifiseer altyd 'n <img>element as die laaste onderliggende element van die <picture>element. Die <img>element word gebruik deur blaaiers wat nie die <picture>element ondersteun nie, of as geen van die <source>merkers ooreenstem nie.
Wanneer om die Picture Element te gebruik
Daar is twee hoofdoeleindes vir die <picture>element:
1. Bandwydte
As jy 'n klein skerm of toestel het, is dit nie nodig om 'n groot beeldlêer te laai nie. Die blaaier sal die eerste <source>
element met ooreenstemmende kenmerkwaardes gebruik en enige van die volgende elemente ignoreer.
2. Formateer ondersteuning
Sommige blaaiers of toestelle ondersteun dalk nie alle beeldformate nie. Deur die
<picture>element te gebruik, kan jy beelde van alle formate byvoeg, en die blaaier sal die eerste formaat gebruik wat dit herken, en enige van die volgende elemente ignoreer.
Voorbeeld
Die blaaier sal die eerste beeldformaat gebruik wat dit herken:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
Let wel: Die blaaier sal die eerste <source>element met ooreenstemmende kenmerkwaardes gebruik en enige volgende <source>elemente ignoreer.
HTML-beeldetikette
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Vir 'n volledige lys van alle beskikbare HTML-merkers, besoek ons HTML-merkerverwysing .