img թեգ

img թեգը ստեղծում է պատկեր: Պատկերի ուղին նշվում է src ատրիբուտում: Չի պահանջում փակող թեգ:

Ատրիբուտներ

Ատրիբուտ	Նկարագրություն
src	Նշում է պատկերի ուղին: Պարտադիր ատրիբուտ:
alt	Ալտերնատիվ տեքստ, որը կցուցադրվի պատկերի փոխարեն, եթե այն չի գտնվել (օրինակ, դեպի այն ուղին սխալ է նշված): Պարտադիր ատրիբուտ: Դրա բացակայության դեպքում վալիդատորը (ծրագիր, որը ստուգում է HTML-ի կամ CSS-ի ճիշտությունը) կբողոքի:
width	Պատկերի լայնությունը՝ պիքսելներով (այս դեպքում չափման միավորները չեն նշվում) կամ տոկոսներով՝ պատկերի ծնողի նկատմամբ:
height	Պատկերի բարձրությունը՝ պիքսելներով (այս դեպքում չափման միավորները չեն նշվում) կամ տոկոսներով՝ պատկերի ծնողի նկատմամբ:

Խորհրդատվություններ

Եթե պատկերի համար չեն նշվել ոչ լայնություն, ոչ բարձրություն՝ պատկերը կունենա իր իրական չափը: Եթե նշված է բարձրություն՝ պատկերը կստանա նշված բարձրությունը, իսկ լայնությամբ կհարմարվի այնպես, որ դրա համամասնությունները չաղճատվեն:

Եթե նշված է միայն լայնություն՝ նմանապես, պատկերը կհարմարվի բարձրությամբ այնպես, որ պահպանի համամասնությունները:

Եթե նշված են և՛ լայնությունը, և՛ բարձրությունը՝ պատկերի համամասնությունները կարող են աղճատվել (կամ էլ ոչ, ինչպես կհանդիպեք): Եթե լայնությունը կամ բարձրությունը (կամ երկուսն էլ միասին) ավելի մեծ են, քան իրականը՝ պատկերը կմեծանա, բայց կկորցնի որակը:

Խորհուրդ է տրվում նշել լայնությունն ու բարձրությունը պատկերներին ատրիբուտներով (ոչ թե CSS-ի միջոցով) – այս դեպքում բրաուզերը պատկերներն ավելի արագ կբեռնի – դրանից հետո նրա կարիքը չկա հաշվարկել յուրաքանչյուր պատկերի չափը:

Խորհուրդ չի տրվում նվազեցնել պատկերի իրական չափերը առանց անհրաժեշտության: Օրինակ, պատկերի իրական չափը 1000 x 1000 պիքսել է, իսկ դուք նրան նշում եք 100px լայնություն: Այս դեպքում էկրանին պատկերը կերևա 100 պիքսելով, սակայն կունենա չափս ամբողջ հազարի վրա և, համապատասխանաբար, կբեռնվի շատ ավելի դանդաղ:

Օրինակ

Եկեք կայքում ավելացնենք պատկեր և չնշենք height և width ատրիբուտները: Պատկերը կունենա իր իրական չափը:

:

Օրինակ

Փորձենք պատկերին ավելացնել լայնություն width ատրիբուտի միջոցով, բարձրությունը դրա համար պետք է հարմարվի այնպես, որ պահպանի պատկերի համամասնությունները:

:

Օրինակ

Հիմա եկեք պատկերին ավելացնենք բարձրություն height ատրիբուտի միջոցով, լայնությունը դրա համար կհարմարվի այնպես, որ պահպանի պատկերի համամասնությունները:

:

Օրինակ

Եկեք միաժամանակ պատկերին ավելացնենք և՛ բարձրություն, և՛ լայնություն: Պատկերի համամասնությունները դրա համար պետք է աղճատվեն (պարտադիր չէ, բայց այս դեպքում բարձրությունն ու լայնությունն ընտրված են այնպես, որ համամասնությունները աղճատվեն):

:

Օրինակ

Եկեք նշենք պատկերի սխալ ուղի (պարզության համար դատարկ ենք թողնում): Պատկերի փոխարեն մենք կտեսնենք alt ատրիբուտի պարունակությունը (թվում է, թե սա սովորական տեքստ է, բայց փորձեք այն պատճենել – ձեզ հաջողություն չի ունենա, այն կձգվի ինչպես պատկեր):

:

Տես նաև