Die img-tag

Die img-tag skep 'n prent. Die pad na die prent word in die src-kenmerk gespesifiseer. Vereis nie 'n sluitings-tag nie.

Kenmerke

Kenmerk	Beskrywing
src	Spesifiseer die pad na die prent. Verpligte kenmerk.
alt	Alternatiewe teks wat in plaas van die prent vertoon sal word indien dit nie gevind word nie (bv. as die pad daarna verkeerd is). Verpligte kenmerk. In die afwesigheid daarvan sal die validator kla (program wat die korrektheid van HTML of CSS naga).
width	Die breedte van die prent, in pixels (in hierdie geval word eenhede nie aangedui nie) of persentasies van die prent se ouer.
height	Die hoogte van die prent, in pixels (in hierdie geval word eenhede nie aangedui nie) of persentasies van die prent se ouer.

Nuanses

Indien vir 'n prent nie breedte of hoogte gespesifiseer is nie - sal die prent sy werklike grootte hê. Indien hoogte gespesifiseer is - sal die prent die gespesifiseerde hoogte hê, en in breedte sal dit aanpas sodat die verhoudings nie vervorm word nie.

Indien slegs breedte gespesifiseer is - op dieselfde manier, sal die prent in hoogte aanpas om die verhoudings te behou.

Indien beide breedte en hoogte gespesifiseer is - kan die prent se verhoudings vervorm word (of dalk nie, hoe raai jy). Indien die breedte of hoogte (of albei saam) groter as die werklike is - sal die prent vergroot, maar kwaliteit verloor.

Dit word aanbeveel om breedte en hoogte vir prente in die kenmerke te spesifiseer (nie via CSS nie) - in hierdie geval sal die blaaier die beelde vinniger laai - dit hoef nie om die grootte van elke prent na ontvangs te bereken nie.

Dit word nie aanbeveel om die werklike grootte van 'n prent sonder noodsaaklikheid te verminder nie. Byvoorbeeld, werklike grootte van die prent is 1000 by 1000 pixels, en jy spesifiseer 'n breedte van 100px. In hierdie geval sal die prent op die skerm lyk soos 100 pixels, maar dit sal die grootte hê van die volle duisend en, gevolglik, baie langer laai.

Voorbeeld

Kom ons voeg 'n prent by die webwerf en spesifiseer nie die height en width kenmerke nie. Die prent sal sy werklike grootte hê:

:

Voorbeeld

Kom ons probeer om breedte by die prent te voeg met behulp van die width-kenmerk, die hoogte moet dan aanpas om die verhoudings van die prent te behou:

:

Voorbeeld

En nou, kom ons voeg hoogte by die prent met behulp van die height-kenmerk, die breedte sal dan aanpas om die verhoudings van die prent te behou:

:

Voorbeeld

Kom ons voeg gelyktydig beide hoogte en breedte by die prent. Die prent se verhoudings sal dan vervorm word (nie noodwendig nie, maar in hierdie geval is die hoogte en breedte so gekies dat die verhoudings vervorm):

:

Voorbeeld

Kom ons gebruik 'n verkeerde pad na die prent (vir eenvoud laat ons dit leeg). In plaas van die prent sal ons die inhoud van die alt-kenmerk sien (dit lyk asof dit gewone teks is - maar probeer om dit te kopieer - jy sal niks kan kopieer nie, dit sal soos 'n prent sleep):

:

Sien ook