Img tegi

img tegi rasm yaratadi. Rasm manzili src atributida ko'rsatiladi. Yopiluvchi teg talab qilmaydi.

Atributlar

Atribut	Ta'rif
`src`	Rasm manzilini ko'rsatadi. Majburiy atribut.
`alt`	Rasm topilmasa (masalan, uning manzili noto'g'ri ko'rsatilgan bo'lsa), uning o'rnida ko'rsatiladigan muqobil matn. Majburiy atribut. U bo'lmasa, validator (HTML yoki CSS ning to'g'riligini tekshiradigan dastur) xato beradi.
`width`	Rasmning kengligi, piksellarda (bunda o'lchov birliklari ko'rsatilmaydi) yoki rasmning ota-elementiga nisbatan foizlarda.
`height`	Rasmning balandligi, piksellarda (bunda o'lchov birliklari ko'rsatilmaydi) yoki rasmning ota-elementiga nisbatan foizlarda.

Nuanslar

Agar rasm uchun na kenglik, na balandlik belgilanmagan bo'lsa - rasm o'zining haqiqiy o'lchamida bo'ladi. Agar balandlik belgilangan bo'lsa - rasm belgilangan balandlikka kiradi, kengligi esa uning nisbatlari buzilmasligi uchun moslanadi.

Agar faqat kenglik belgilangan bo'lsa - xuddi shunday, rasm balandligi nisbatlarni saqlab qolish uchun moslanadi.

Agar ham kenglik, ham balandlik belgilangan bo'lsa - rasmning nisbatlari buzilishi mumkin (yoki bo'lmasligi ham mumkin, teskari topishingizga bog'liq). Agar kenglik yoki balandlik (yoki ikkalasi birga) haqiqiy o'lchamdan katta bo'lsa - rasm kattalashadi, lekin sifati pasayadi.

Rasmlarga kenglik va balandlikni atributlarda belgilash (CSS orqali emas) tavsiya etiladi - bunda brauzer rasmlarni tezroq yuklaydi - uning uchun har bir rasmni o'lgach, uning o'lchamini hisoblash hojati yo'q.

Rasmning haqiqiy o'lchamlarini keragisiz kamaytirish tavsiya etilmaydi. Masalan, rasmning haqiqiy o'lchami 1000 dan 1000 piksel, siz esa unga 100px kenglik belgiladingiz. Bunda rasm ekranda 100 piksel ko'rinadi, lekin butun minglik o'lchamga ega bo'ladi va shuning uchun yuklanishi ancha uzoqroq davom etadi.

Misol

Keling, saytga rasm qo'shaylik va height va width atributlarini belgilamaylik. Rasm o'zining haqiqiy o'lchamida bo'ladi:

<img src="monkey.png" alt="maymun">

Misol

Keling, rasmga width atributi yordamida kenglik qo'shib ko'ramiz, bunda balandlik rasm nisbatlarini saqlab qolish uchun moslanishi kerak:

<img src="monkey.png" width="200" alt="maymun">

Misol

Endi esa rasmga height atributi yordamida balandlik qo'shamiz, bunda kenglik rasm nisbatlarini saqlab qolish uchun moslanadi:

<img src="monkey.png" height="100" alt="maymun">

Misol

Keling, rasmga bir vaqtning o'zida ham balandlik, ham kenglik qo'shamiz. Bunda rasmning nisbatlari buzilishi kerak (majburiy emas, lekin bu holatda balandlik va kenglik shunday tanlanganki, nisbatlar buziladi):

<img src="monkey.png" height="100" width="300" alt="maymun">

Misol

Keling, rasmga noto'g'ri manzil belgilaymiz (soddalik uchun uni bo'sh qoldiramiz). Rasm o'rnida biz alt atributi tarkibini ko'ramiz (bu oddiy matn ko'rinishida - lekin uni nusxalashga harakat qiling - hech narsa amalga oshmaydi, u rasm kabi tortiladi):

<img src="" alt="maymun">

Shuningdek qarang

width xususiyati,
elementning kengligini belgilaydi
height xususiyati,
elementning balandligini belgilaydi
figure tegi,
rasmlar va ularning sarlavhalarini guruhlaydi
figcaption tegi,
rasmga sarlavha beradi
background-image xususiyati,
fon rasmini belgilaydi