სურათის სიგანე HTML-ში

სურათები ნაგულისხმევად ნამდვილი ზომით გამოიყურება. მაგალითად, ის ღიმილის სურათი, რომელიც ზემოთ გამოვიტანეთ, აქვს ნამდვილი ზომა 130 ზე 130 პიქსელი და ბრაუზერში სურათის ზომაც იგივე ვხედავთ.

სურვილის შემთხვევაში, შესაძლებელია სურათის ზომის შეცვლა, მისთვის სიგანის მინიჭება. ეს კეთდება ატრიბუტის width დახმარებით.

მაგალითისთვის, მივანიჭოთ ჩვენს სურათს სიგანე 100 პიქსელი. ამისთვის ატრიბუტის width მნიშვნელობად მივუთითოთ რიცხვი 100, აი ასე:

htmlwidth="100"

რა ზომის იქნება სურათი ეკრანზე? შეიძლება იფიქროთ, რომ ასეთი: სიგანე 100 პიქსელი, როგორც ჩვენ დავაყენეთ, და ნამდვილი სიმაღლე 130, რადგან მას ჩვენ არ დავაყენეთ. სინამდვილეში, ასე არ იქნება.

სიგანე ნამდვილად იქნება 100 პიქსელი, ხოლო სიმაღლე მოარგებლება ისე, რომ სურათის პროპორციები არ დამახინჯდეს, ანუ ასევე გახდება 100 პიქსელი.

დავაწყებინოთ და დავრწმუნდეთ ამაში:

html<img src="smile.png" width="100">

Результат: