img-tagget

Tagget img opretter et billede. Stien til billedet angives i attributten src. Kræver ikke afsluttende tag.

Attributter

Attribut	Beskrivelse
src	Angiver stien til billedet. Obligatorisk attribut.
alt	Alternativ tekst, som vil blive vist i stedet for billedet, hvis det ikke findes (for eksempel, hvis stien til det er angivet forkert). Obligatorisk attribut. Ved dens fravær vil valideringen (programmet, der kontrollerer korrektheden af HTML eller CSS) give en fejl.
width	Billedets bredde, i pixels (i dette tilfælde angives måleenheder ikke) eller procenter af billedets forælder.
height	Billedets højde, i pixels (i dette tilfælde angives måleenheder ikke) eller procenter af billedets forælder.

Nuancer

Hvis der hverken er angivet bredde eller højde for billedet - vil billedet have sin faktiske størrelse. Hvis der er angivet højde - vil billedet blive den angivne højde, og i bredden tilpasse sig således, at dens proportioner ikke bliver forvrænget.

Hvis der kun er angivet bredde - på samme måde vil billedet tilpasse sig i højden for at bevare proportionerne.

Hvis der er angivet både bredde og højde - kan billedets proportioner blive forvrænget (eller måske ikke, afhængig af om du gætter rigtigt). Hvis bredden eller højden (eller begge dele sammen) er større end den faktiske - vil billedet forstørres, men miste i kvalitet.

Det anbefales at angive bredde og højde for billeder i attributter (i stedet for via CSS) - i dette tilfælde vil browseren indlæse billederne hurtigere - den behøver ikke at beregne størrelsen på hvert billede efter det er modtaget.

Det anbefales ikke at reducere de faktiske størrelser på billedet uden grund. For eksempel, den faktiske størrelse på billedet er 1000 gange 1000 pixels, og du angiver en bredde på 100px. I dette tilfælde vil billedet på skærmen se ud som 100 pixels, men have en størrelse på hele tusinden og følgelig tage meget længere tid at indlæse.

Eksempel

Lad os tilføje et billede til hjemmesiden og ikke angive attributterne height og width. Billedet vil have sin faktiske størrelse:

:

Eksempel

Lad os prøve at tilføje bredde til billedet ved hjælp af attributten width, højden bør herefter tilpasse sig for at bevare billedets proportioner:

:

Eksempel

Og nu lad os tilføje højde til billedet ved hjælp af attributten height, bredden vil herefter tilpasse sig for at bevare billedets proportioner:

:

Eksempel

Lad os samtidig tilføje både højde og bredde til billedet. Billedets proportioner bør herefter blive forvrænget (ikke nødvendigvis, men i dette tilfælde er højden og bredden valgt sådan, at proportionerne bliver forvrænget):

:

Eksempel

Lad os angive en forkert sti til billedet (for enkelheds skyld lader vi den være tom). I stedet for billedet vil vi se indholdet af attributten alt (det ser ud til at være almindelig tekst - men prøv at kopiere den - det vil ikke lykkes for dig, den vil trækkes som et billede):

:

Se også