სურათის სიგანე HTML-ში
სურათები ნაგულისხმევად ნამდვილი ზომით
გამოიყურება. მაგალითად, ის ღიმილის სურათი,
რომელიც ზემოთ გამოვიტანეთ, აქვს ნამდვილი ზომა
130 ზე 130
პიქსელი და ბრაუზერში სურათის ზომაც იგივე
ვხედავთ.
სურვილის შემთხვევაში, შესაძლებელია სურათის ზომის შეცვლა,
მისთვის სიგანის მინიჭება. ეს კეთდება ატრიბუტის
width დახმარებით.
მაგალითისთვის, მივანიჭოთ ჩვენს სურათს
სიგანე 100 პიქსელი. ამისთვის ატრიბუტის
width მნიშვნელობად მივუთითოთ რიცხვი 100,
აი ასე:
width="100"
რა ზომის იქნება სურათი ეკრანზე?
შეიძლება იფიქროთ, რომ ასეთი: სიგანე 100
პიქსელი, როგორც ჩვენ დავაყენეთ, და ნამდვილი სიმაღლე
130, რადგან მას ჩვენ არ დავაყენეთ.
სინამდვილეში, ასე არ იქნება.
სიგანე ნამდვილად იქნება 100 პიქსელი,
ხოლო სიმაღლე მოარგებლება ისე, რომ სურათის პროპორციები
არ დამახინჯდეს, ანუ ასევე გახდება
100 პიქსელი.
დავაწყებინოთ და დავრწმუნდეთ ამაში:
<img src="smile.png" width="100">
:
დააყენეთ თქვენს სურათს სიგანე 300
პიქსელზე.
