Тег img

Тег img сүрөт түзөт. Сүрөткө жол атрибут src аркылуу көрсөтүлөт. Жабуучу тег талап кылбайт.

Атрибуттар

Атрибут	Сүрөттөмө
`src`	Сүрөткө жолду белгилейт. Милдеттүү атрибут.
`alt`	Альтернативдүү текст, ал сүрөт табылбаган учурда (мисалы, ага жол туура эмес көрсөтүлгөндө) сүрөттүн ордуна көрсөтүлөт. Милдеттүү атрибут. Ал жок болсо, валидатор (HTML же CSS тууралыгын текшерүүчү программа) ката чыгарат.
`width`	Сүрөттүн туурасы, пикселдерде (бул учурда өлчөм бирдиктери көрсөтүлбөйт) же сүрөттүн ата-энесинин пайызы менен.
`height`	Сүрөттүн бийиктиги, пикселдерде (бул учурда өлчөм бирдиктери көрсөтүлбөйт) же сүрөттүн ата-энесинин пайызы менен.

Нюанстар

Эгер сүрөткө эч туурасы да, эч бийиктиги да белгиленбесе - сүрөт өзүнүн чыныгы өлчөмүнө ээ болот. Эгер бийиктиги белгиленсе - сүрөт белгиленген бийиктикке чейин кыскарат, ал эми туурасы сүрөттүн пропорциялары бузулбашы үчүн өзгөрөт.

Эгер туурасы гана белгиленсе - ушул сыяктуу эле, сүрөт пропорцияларды сактоо үчүн бийиктиги боюнча өзгөрөт.

Эгер туурасы да, бийиктиги да белгиленсе - сүрөттүн пропорциялары бузулушу мүмкүн (же болбошу да мүмкүн, сиз кантип тапсаңыз). Эгер туурасы же бийиктиги (же экөө тең) чыныгы өлчөмүнөн чоң болсо - сүрөт чоңойот, бирок сапаты төмөндөйт.

Сүрөттөргө туурасын жана бийиктигин атрибуттар аркылуу (CSS аркылуу эмес) белгилөө сунушталат - бул учурда браузер сүрөттөрдү тезирээк жүктөйт - ага ар бир сүрөттүн өлчөмүн алуудан кийин эсептөөгө туура келбейт.

Сүрөттүн чыныгы өлчөмдөрүн зарылдыксыз азайтуу сунушталбайт. Мисалы, сүрөттүн чыныгы өлчөмү 1000 кө 1000 пиксел, ал эми сиз анын туурасын 100px деп белгилесеңиз. Бул учурда сүрөт экранда 100 пикселдей көрүнөт, бирок өлчөмү миң пикселге толук болуп, тиешелүү түрдө жүктөлүшү көбүрөөк убакытты талап кылат.

Мисал

Келгиле, сайтка сүрөт кошуп, атрибуттарына height жана width белгилемейли. Сүрөт өзүнүн чыныгы өлчөмүнө ээ болот:

<img src="monkey.png" alt="маймыл">

Мисал

Келгиле, сүрөткө width атрибуту аркылуу туурасын кошуп көрөлү, бул учурда бийиктиги сүрөттүн пропорцияларын сактоо үчүн өзгөрүшү керек:

<img src="monkey.png" width="200" alt="маймыл">

Мисал

Эми келгиле, сүрөткө height атрибуту аркылуу бийиктигин кошуп көрөлү, туурасы бул учурда сүрөттүн пропорцияларын сактоо үчүн өзгөрөт:

<img src="monkey.png" height="100" alt="маймыл">

Мисал

Келгиле, сүрөткө бир эле учурда бийиктигин да, туурасын да кошуп көрөлү. Бул учурда сүрөттүн пропорциялары бузулушу керек (милдеттүү эмес, бирок бул учурда бийиктик жана туура пропорцияларды бузуу үчүн тандалган):

<img src="monkey.png" height="100" width="300" alt="маймыл">

Мисал

Келгиле, сүрөткө туура эмес жолду кошуп көрөлү (жөнөкөйлөтүү үчүн аны бош калтырабыз). Сүрөттүн ордуна биз alt атрибутунун мазмунун көрөбүз (бул кадимки текст сыяктуу көрүнөт - бирок аны көчүрүп көрүңүз - иштебей калат, ал сүрөт сыяктуу тартылып чыгат):

<img src="" alt="маймыл">

Ошондой эле караңыз

width касиети,
элементтин туурасын белгилейт
height касиети,
элементтин бийиктигин белгилейт
figure теги,
сүрөттөрдү жана алардын кошумча жазууларын топтоот
figcaption теги,
сүрөткө кошумча жазууну белгилейт
background-image касиети,
фондук сүрөттү белгилейт