Upana wa Picha katika HTML

Kwa default, picha huonyeshwa kwa ukubwa wake halisi. Kwa mfano, picha ile ya tabasamu ambayo tulionyesha hapo juu, ina ukubwa halisi wa 130 kwa 130 pikseli na ukubwa huo wa picha ndio tunaouona kwenye kivinjari.

Kwa hiari inawezekana kubadilisha ukubwa wa picha, kwa kuiwekea upana. Hii inafanywa kwa kutumia sifa width.

Wacha kwa mfano tuweke upana wa picha yetu kuwa 100 pikseli. Ili kufanya hivyo thamani ya sifa width tutaweka nambari 100, hivi:

Je, itakuwa ukubwa gani wa picha kwenye skrini? Mtu anaweza kudhani kuwa itakuwa: upana 100 pikseli, kama tulivyoweka, na urefu halisi wa 130, kwa kuwa hatukuuainisha. Kwa kweli, haitakuwa hivyo.

Upana kwa hakika utakuwa 100 pikseli, lakini urefu utabadilika ili kuhakikisha sehemu za picha hazipotoshi, yaani pia utakuwa 100 pikseli.

Wacha tuendeshe na tuhakikishe hili:

: