img-taggen

Taggen img oppretter et bilde. Stien til bildet angis i attributten src. Krever ikke avsluttende tagg.

Attributter

Attributt	Beskrivelse
src	Angir stien til bildet. Obligatorisk attributt.
alt	Alternativ tekst som vil vises i stedet for bildet, hvis det ikke blir funnet (for eksempel, feil sti angitt). Obligatorisk attributt. Ved fravær vil valideringen (programmet som sjekker korrektheten av HTML eller CSS) gi feilmelding.
width	Bildets bredde, i piksler (i dette tilfellet angis ikke måleenheter) eller prosent av foreldreelementet til bildet.
height	Bildets høyde, i piksler (i dette tilfellet angis ikke måleenheter) eller prosent av foreldreelementet til bildet.

Nyanser

Hvis verken bredde eller høyde er angitt for bildet - vil bildet ha sin virkelige størrelse. Hvis høyde er angitt - vil bildet få angitt høyde, og bredden vil tilpasses for å bevare proporsjonene.

Hvis kun bredde er angitt - tilsvarende, vil bildet tilpasse seg i høyden for å bevare proporsjonene.

Hvis både bredde og høyde er angitt - kan proporsjonene til bildet bli forvrengt (eller kanskje ikke, avhengig av tilfeldigheter). Hvis bredden eller høyden (eller begge sammen) er større enn den virkelige - vil bildet forstørres, men miste kvalitet.

Det anbefales å angi bredde og høyde for bilder i attributter (ikke via CSS) - da vil nettleseren laste inn bildene raskere - den trenger ikke å beregne størrelsen på hvert bilde etter at det er mottatt.

Det anbefales ikke å redusere de virkelige størrelsene til bildet uten grunn. For eksempel, den virkelige størrelsen på bildet er 1000 ganger 1000 piksler, men du setter bredden til 100px. I dette tilfellet vil bildet på skjermen se ut som 100 piksler, men ha størrelse på hele tusen og følgelig ta mye lengre tid å laste.

Eksempel

La oss legge til et bilde på nettstedet og ikke angi attributtene height og width. Bildet vil ha sin virkelige størrelse:

:

Eksempel

La oss prøve å legge til bredde på bildet ved hjelp av attributten width, høyden skal da tilpasse seg for å bevare bildets proporsjoner:

:

Eksempel

Og nå la oss legge til høyde på bildet ved hjelp av attributten height, bredden vil da tilpasse seg for å bevare bildets proporsjoner:

:

Eksempel

La oss samtidig legge til både høyde og bredde på bildet. Bildets proporsjoner bør da blir forvrengt (ikke nødvendigvis, men i dette tilfellet er høyde og bredde valgt slik at proporsjonene forvrenges):

:

Eksempel

La oss sette feil sti til bildet (for enkelhets skyld lar vi den være tom). I stedet for bildet vil vi se innholdet i attributten alt (det ser ut som vanlig tekst - men prøv å kopiere den - du vil ikke klare det, den vil dras som et bilde):

:

Se også