Žyma img

Žyma img sukuria paveikslėlį. Kelias į paveikslėlį nurodomas src atribute. Nereikalauja uždaromosios žymos.

Atributai

Atributas	Aprašas
src	Nurodo kelią į paveikslėlį. Privalomas atributas.
alt	Alternatyvus tekstas, kuris bus rodomas vietoje paveikslėlio, jei jis nerastas (pvz., neteisingai nurodytas kelias). Privalomas atributas. Jei jo nėra, validatorius (programa, kuri tikrina HTML ar CSS korektiškumą) išmes klaidą.
width	Paveikslėlio plotis, pikseliais (tokiu atveju matavimo vienetai nenurodomi) arba procentais nuo tėvinio elemento.
height	Paveikslėlio aukštis, pikseliais (tokiu atveju matavimo vienetai nenurodomi) arba procentais nuo tėvinio elemento.

Niuansei

Jei paveikslėliui nenustatytas nei plotis, nei aukštis - paveikslėlis turės savo realų dydį. Jei nustatytas aukštis - paveikslėlis įgaus nustatytą aukštį, o plotis prisitaikys taip, kad jo proporcijos nebūtų iškraipytos.

Jei nustatytas tik plotis - analogiškai, paveikslėlio aukštis prisitaikys taip, kad būtų išlaikytos proporcijos.

Jei nustatytas ir plotis, ir aukštis - paveikslėlio proporcijos gali būti iškraipytos (arba ir ne, kaip atsitiks). Jei plotis ar aukštis (arba abu kartu) didesni už realųjį - paveikslėlis padidės, bet praras kokybę.

Rekomenduojama nustatyti plotį ir aukštį paveikslėliams atributuose (o ne per CSS) - tokiu atveju naršyklė greičiau įkels vaizdus - jai nereikės skaičiuoti kiekvieno paveikslėlio dydį po jo gavimo.

Nerekomenduojama sumažinti realius paveikslėlio dydžius be reikalo. Pavyzdžiui, realus paveikslėlio dydis 1000 x 1000 pikselių, o jūs nustatysite jam plotį 100px. Tokiu atveju ekrane paveikslėlis atrodys 100 pikselių, tačiau turės dydį visą tūkstantį ir, atitinkamai, krausis žymiai lėčiau.

Pavyzdys

Pridėkime paveikslėlį į svetainę ir nenustatykime atributų height ir width. Paveikslėlis turės savo realų dydį:

:

Pavyzdys

Pabandykime paveikslėliui pridėti plotį naudojant atributą width, aukštis tuo metu turėtų prisitaikyti taip, kad būtų išlaikytos paveikslėlio proporcijos:

:

Pavyzdys

Dabar paveikslėliui pridėkime aukštį naudojant atributą height, plotis tuo metu prisitaikys taip, kad būtų išlaikytos paveikslėlio proporcijos:

:

Pavyzdys

Vienu metu paveikslėliui pridėkime ir aukštį, ir plotį. Paveikslėlio proporcijos tuo metu turėtų būti iškraipytos (nebūtinai, tačiau šiuo atveju aukštis ir plotis parinkti taip, kad proporcijos būtų iškraipytos):

:

Pavyzdys

Nustatykime neteisingą kelią į paveikslėlį (dėl paprastumo palikime jį tuščią). Vietoj paveikslėlio pamatysime alt atributo turinį (atrodo, kad tai paprastas tekstas - bet pabandykite jį nukopijuoti - jums nepavyks, jis trauksis kaip paveikslėlis):

:

Taip pat žiūrėkite