Նկարի լայնությունը HTML-ում

Լռելյայնորեն նկարները ցուցադրվում են իրենց իրական չափերով: Օրինակ, վերևում ցուցադրված ժպիտ նկարն ունի իրական չափը 130 բ 130 պիքսել և բրաուզերում մենք տեսնում ենք նկարի հենց այդ չափը:

� Ցանկության դեպքում կարելի է փոխել նկարի չափը՝ սահմանելով դրա լայնությունը: Դա արվում է width ատրիբուտի միջոցով:

Օրինակի համար եկեք մեր նկարին տանք 100 պիքսել լայնություն: Դրա համար width ատրիբուտի արժեքով նշենք 100 թիվը, ահա այսպես.

htmlwidth="100"

Ինչ չափի կլինի նկարը էկրանին? Կարելի է մտածել, որ հետևյալը. լայնությունը 100 պիքսել, ինչպես մենք սահմանեցինք, և իրական բարձրությունը 130, քանի որ մենք այն չենք սահմանել: Իրականում, դա այդպես չի լինի:

Լայնությունը իսկապես կլինի 100 պիքսել, իսկ բարձրությունը կհարմարվի այնպես, որ նկարի համամասնությունները չաղավաղվեն, այսինքն կդառնա նաև 100 պիքսել:

Եկեք գործարկենք և համոզվենք դրանում.

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

Результат: