<img>


Misol

Rasm joylashtirish:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
O‘zingiz sinab ko‘ring »

Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.


ULASHISH

Ta’rif va qo‘llanilishi

<img> tegi HTML sahifaga rasm joylashtirish uchun ishlatiladi.

Texnik jihatdan rasmlar veb-sahifaga joylanmaydi; rasmlar veb-sahifalarga bog‘lanadi. <img> tegi havola qilingan rasm uchun joy ajratadi.

<img> tegining ikkita majburiy atributi bor:

  • src - rasmga yo‘lni belgilaydi
  • alt - rasm biror sababga ko‘ra ko‘rsatilmasa, uning uchun muqobil matnni belgilaydi

Eslatma: Shuningdek, rasmning kengligi va balandligini har doim ko‘rsating. Agar kenglik va balandlik ko‘rsatilmasa, rasm yuklanayotganda sahifa miltillashi mumkin.

Maslahat: Rasmni boshqa hujjatga bog‘lash uchun <img> tegini <a> tegi ichiga joylashtirish kifoya (quyidagi misolga qarang).


Brauzerlarda qo‘llab-quvvatlash

Element
<img> Ha Ha Ha Ha Ha

Atributlar

Atribut Qiymat Tavsif
alt text Rasm uchun muqobil matnni belgilaydi
crossorigin anonymous
use-credentials
Boshqa manbadan (cross-origin) murojaat qilishga ruxsat beruvchi uchinchi tomon saytlaridagi rasmlarni canvas bilan ishlatishga ruxsat beradi
height pixels Rasmning balandligini belgilaydi
ismap ismap Rasmni server tomonidagi rasm xaritasi (image map) sifatida belgilaydi
loading eager
lazy
Brauzer rasmni darhol yuklashi kerakmi yoki rasmlarni yuklashni muayyan shartlar bajarilguncha kechiktirishi kerakmi — shuni belgilaydi
longdesc URL Rasmning batafsil tavsifiga olib boruvchi URL manzilni belgilaydi
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
Rasmni olishda qaysi referrer ma’lumotidan foydalanishni belgilaydi
sizes sizes Turli sahifa maketlari uchun rasm o‘lchamlarini belgilaydi
src URL Rasmga yo‘lni belgilaydi
srcset URL-list Turli vaziyatlarda ishlatiladigan rasm fayllari ro‘yxatini belgilaydi
usemap #mapname Rasmni mijoz tomonidagi rasm xaritasi (image map) sifatida belgilaydi
width pixels Rasmning kengligini belgilaydi


Global atributlar

<img> tegi HTML’dagi global atributlarni ham qo‘llab-quvvatlaydi.


Hodisa atributlari

<img> tegi HTML’dagi hodisa atributlarini ham qo‘llab-quvvatlaydi.


Ko‘proq misollar

Misol

Rasmni tekislash (CSS yordamida):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:bottom"> <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle"> <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:top"> <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:right"> <img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:left">
O‘zingiz sinab ko‘ring »

Misol

Rasmga chegara qo‘shish (CSS yordamida):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="border:5px solid black">
O‘zingiz sinab ko‘ring »

Misol

Rasmga chap va o‘ng tashqi chekinishlar (margin) qo‘shish (CSS yordamida):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:0px 50px">
O‘zingiz sinab ko‘ring »

Misol

Rasmga yuqori va pastki tashqi chekinishlar (margin) qo‘shish (CSS yordamida):

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="vertical-align:middle;margin:50px 0px">
O‘zingiz sinab ko‘ring »

Misol

Boshqa papkadan yoki boshqa veb-saytdan rasm joylashtirish:

<img src="/images/stickman.gif" alt="Stickman" width="24" height="39"> <img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" height="32">
O‘zingiz sinab ko‘ring »

Misol

Rasmga giperhavola qo‘shish:

<a href="https://www.w3schools.com"> <img src="w3html.gif" alt="W3Schools.com" width="100" height="132"> </a>
O‘zingiz sinab ko‘ring »

Misol

Bosiladigan hududlarga ega rasm xaritasini yaratish. Har bir hudud — giperhavola:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> <map name="workmap">   <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">   <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">   <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"> </map>
O‘zingiz sinab ko‘ring »

Tegishli sahifalar

HTML darsligi: HTML rasmlar

HTML DOM ma’lumotnomasi: Image obyekti

CSS darsligi: Rasmlarni bezash


Standart CSS sozlamalari

Ko‘pchilik brauzerlar <img> elementini quyidagi standart qiymatlar bilan ko‘rsatadi:

Misol

img {   display: inline-block; }
O‘zingiz sinab ko‘ring »


W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!