Тег 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 қасиеті,
ол фоны суретін белгілейді