Тег img

Тег img расм яратади. Расмга йўл src атрибутида кўрсатилади. Ёпилувчи тег талаб қилмайди.

Атрибутлар

Атрибут	Тавсиф
`src`	Расмга йўлни белгилайди. majburiy атрибут.
`alt`	Альтернатив матн, у расм топилмаганда (масалан, унга йўл нотўғри кўрсатилганда) кўрсатилади. majburiy атрибут. У йўқ бўлганда валидатор (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 хусусияти,
фон расмини белгилайди