HTML'de Resim Genişliği
Varsayılan olarak resimler kendi gerçek
boyutlarıyla görüntülenir. Örneğin, yukarıda
gösterdiğimiz gülücük resminin gerçek boyutu
130 x 130
pikseldir ve tarayıcıda da resmi bu boyutta
görürüz.
İstenirse, bir resme genişlik vererek boyutunu
değiştirebiliriz. Bu,
width niteliği
kullanılarak yapılır.
Örnek olarak resmimize
100 piksel genişlik verelim. Bunun için
width niteliğinin değeri olarak
100 sayısını şu şekilde belirtiyoruz:
width="100"
Peki ekrandaki resmin boyutu ne olacak?
Belirttiğimiz gibi genişliğin 100
piksel, yüksekliğin ise belirtmediğimiz için
gerçek yükseklik olan 130 piksel
olacağını düşünebilirsiniz. Aslında durum
böyle olmayacak.
Genişlik gerçekten 100 piksel
olacak, ancak yükseklik resmin oranları
bozulmayacak şekilde ayarlanacak, yani
100 piksel olacak.
Hadi çalıştıralım ve görelim:
<img src="smile.png" width="100">
:
Resminize 300
piksel genişlik verin.
