Kichwa cha img
Kichwa img kinaunda picha. Njia ya picha
inaandikwa kwenye sifa src. Haihitaji kichwa
cha kufunga.
Sifa
| Sifa | Maelezo |
|---|---|
src |
Inaweka njia ya picha.
Sifa ya lazima. |
alt |
Maandishi mbadala, ambayo yataonyeshwa badala ya picha,
kama haipatikani (kwa mfano, njia imeandikwa vibaya).
Sifa ya lazima. Kama haipo, validator (programu inayokagua usahihi wa HTML au CSS) italalamika. |
width |
Upana wa picha, kwenye saizi za skrini (katika kesi hii vitengo havitaainishwa) au asilimia kutoka kwa kipengele mzazi cha picha. |
height |
Urefu wa picha, kwenye saizi za skrini (katika kesi hii vitengo havitaainishwa) au asilimia kutoka kwa kipengele mzazi cha picha. |
Nuances
Kama picha haijawekewa upana wala urefu - picha itakuwa na ukubwa wake halisi. Kama umewekewa urefu - picha itakuwa na urefu uliowekwa, na upana utabadilika ili uwiano wake usiharibike.
Kama upana pekee umewekwa - vivyo hivyo, picha itabadilika kwa urefu ili kuweka uwiano.
Kama upana na urefu wamewekwa - uwiano wa picha unaweza kuharibika (au la, utakavyokisia). Kama upana au urefu (au yote pamoja) ni mkubwa kuliko ule halisi - picha itakua, lakini itapoteza ubora.
Inapendekezwa kuweka upana na urefu wa picha kwenye sifa (na si kupitia CSS) - katika kesi hii kivinjari kitapakia picha haraka - hakuna haja ya kuhesabu ukubwa wa kila picha baada ya kuipata.
Haipendekezwi kupunguza ukubwa halisi
wa picha bila lazima. Kwa mfano,
ukubwa halisi wa picha ni 1000 kwa 1000
saizi za skrini, na wewe utaweka upana wake kuwa 100px.
Katika kesi hii picha kwenye skrini itaonekana
kwa 100 saizi za skrini, lakini itakuwa na ukubwa
wa elfu nzima na, ipasavyo, itapakia
kwa muda mrefu zaidi.
Mfano
Wacha tuongeze picha kwenye tovuti na tusiiweke
sifa height na width.
Picha itakuwa na ukubwa wake halisi:
<img src="monkey.png" alt="nyani">
:
Mfano
Wacha tujaribu kuongeza upana kwa picha
kwa kutumia sifa width, urefu katika
kesi hii unapaswa kubadilika ili kuweka
uwiano wa picha:
<img src="monkey.png" width="200" alt="nyani">
:
Mfano
Na sasa wacha tuongeze urefu kwa picha
kwa kutumia sifa height, upana
katika kesi hii utabadilika ili kuweka
uwiano wa picha:
<img src="monkey.png" height="100" alt="nyani">
:
Mfano
Wacha tuongeze wakati huo huo urefu na upana kwa picha. Uwiano wa picha katika kesi hii unapaswa kuwa umaharibika (si lazima, lakini katika kesi hii urefu na upana vimechaguliwa ili uwiano uharibike):
<img src="monkey.png" height="100" width="300" alt="nyani">
:
Mfano
Wacha tuweke njia isiyo sahihi kwa picha
(kwa urahisi tuache iwe tupu). Badala ya
picha tutaona yaliyomo kwenye sifa alt
(inaonekana kuwa ni maandishi ya kawaida - lakini jaribu
kuyaiga - hutafaulu,
yatanaswa kama picha):
<img src="" alt="nyani">
:
Angalia pia
-
sifa
width,
inayoweka upana wa kipengele -
sifa
height,
inayoweka upana wa kipengele -
kichwa
figure,
kinachounganisha picha na maelezo yake -
kichwa
figcaption,
kinachoweka maelezo ya picha -
sifa
background-image,
inayoweka picha ya mandharinyuma