img tags

Tags img izveido attēlu. Ceļš uz attēlu tiek norādīts atribūtā src. Nepieprasa aizverošo tagu.

Atribūti

Atribūts	Apraksts
src	Norāda ceļu uz attēlu. Obligāts atribūts.
alt	Alternatīvs teksts, kas tiks rādīts attēla vietā, ja tas netiks atrasts (piemēram, ja ceļš uz to ir norādīts nepareizi). Obligāts atribūts. Ja tas trūkst, validators (programma, kas pārbauda HTML vai CSS korektumu) izmestās kļūdas.
width	Attēla platums, pikseļos (šajā gadījumā mērvienības norādītas) vai procentos no attēla vecāka elementa.
height	Attēla augstums, pikseļos (šajā gadījumā mērvienības norādītas) vai procentos no attēla vecāka elementa.

Nianses

Ja attēlam nav norādīts ne platums, ne augstums - attēlam būs tā reālie izmēri. Ja ir norādīts augstums - attēls kļūs norādītā augstuma, bet platums pielāgosies tā, lai tā proporcijas netikt izkropļotas.

Ja ir norādīts tikai platums - līdzīgi, attēla augstums pielāgosies tā, lai saglabātu proporcijas.

Ja ir norādīts gan platums, gan augstums - attēla proporcijas var tikt izkropļotas (vai arī ne, kā jums izdosies). Ja platums vai augstums (vai abi kopā) ir lielāki par reālo - attēls palielināsies, bet zaudēs kvalitātē.

Ieteicams norādīt platumu un augstumu attēliem atribūtos (nevis caur CSS) - tādā gadījumā pārlūkprogramma ātrāk ielādēs attēlus - tai nav jāaprēķina katra attēla izmērs pēc tā saņemšanas.

Neiesakāms samazināt attēla reālos izmērus bez nepieciešamības. Piemēram, attēla reālais izmērs ir 1000 uz 1000 pikseļiem, bet jūs tam uzstādīsit platumu 100px. Šajā gadījumā ekrānā attēls izskatīsies 100 pikseļu plats, taču būs uz visiem tūkstošiem un attiecīgi ielādēsies daudz ilgāk.

Piemērs

Pievienosim vietnei attēlu un neuzstādīsim atribūtus height un width. Attēlam būs tā reālais izmērs:

:

Piemērs

Mēģināsim attēlam pievienot platumu ar atribūta width palīdzību, augstumam šajā gadījumā vajadzētu pielāgoties tā, lai saglabātu attēla proporcijas:

:

Piemērs

Tagad pievienosim attēlam augstumu ar atribūta height palīdzību, platums šajā gadījumā pielāgosies tā, lai saglabātu attēla proporcijas:

:

Piemērs

Vienlaicīgi pievienosim attēlam gan augstumu, gan platumu. Attēla proporcijas šajā gadījumā vajadzētu kļūt izkropļotām (ne obligāti, bet šajā gadījumā augstums un platums ir izvēlēti tā, lai proporcijas tiktu izkropļotas):

:

Piemērs

Uzstādīsim nepareizu ceļu uz attēlu (vienkāršības labad atstāsim to tukšu). Attēla vietā mēs redzēsim atribūta alt saturu (šķiet, ka tas ir parasts teksts - bet mēģiniet to kopēt - jums nekas neizdosies, tas vilksies kā attēls):

:

Skatiet arī