CSS'da rasm va video: max-width, object-fit va aspect-ratio

Qisqacha: Rasm ekranga sig'ishi uchun deyarli har loyiha img { display: block; max-width: 100%; height: auto; } bilan boshlanadi: block rasm ostidagi bo'shliqni yo'qotadi, max-width rasmni faqat kichraytiradi, height: auto nisbatni saqlaydi. Rasmni belgilangan joyga buzmasdan joylash uchun object-fit: cover (kesib to'ldiradi) yoki contain (to'liq sig'diradi) yoziladi. HTML'dagi width/height atributlari sahifa sakrashining oldini oladi, iframe ga esa nisbatni aspect-ratio beradi.

Bu darsda

• Rasm ostidagi bo'shliq qayerdan kelishini tushuntirasiz va uni yo'qotasiz.
• Rasmlar uchun standart "reset"ni yozasiz va width: 100% bilan max-width: 100% farqini aytasiz.
• object-fit va object-position bilan har xil nisbatdagi suratlarni bir xil kartalarga joylaysiz.
• aspect-ratio va width/height atributlari bilan sahifa sakrashining oldini olasiz.
• Piksel rasmni pixelated bilan tiniq, iframe va video ni esa ekranga moslashuvchan qilasiz.

Oldin bilishingiz kerak: img asoslari, O'lchamlar, display, Fonlar, Chegara va soyalar.

1. Nega bu kerak?

img asoslari darsida ikki va'da bergan edik: "Rasmni ekranga moslashni CSS qiladi" va "Keyinroq CSS'da width: 100%; height: auto; yozib, rasmni ekranga moslaysiz". Shu dars — o'sha "keyinroq".

Muammoni ko'ramiz. «Bahor» menyusidagi osh surati — 1200×800 piksel, HTML'da atributlar bilan, xuddi o'sha darsda o'rgatganimizdek. Natijani telefon enida (360) oching:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  article {
    max-width: 20rem;
    padding: 0 12px;
    border: 2px solid var(--rang-asosiy);
  }
</style>
<article>
  <h3>Osh</h3>
  <img alt="Bir tarelka Toshkent oshi" width="1200" height="800"
    src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
    width='1200' height='800' viewBox='0 0 300 200'>
    <rect width='300' height='200' fill='%23fde2c4'/>
    <circle cx='150' cy='100' r='70' fill='%232f6b3a'/></svg>">
  <p>35 000 so'm</p>
</article>

Nimaga qarang: karta eni 20rem, surat esa 1200 piksel — u kartadan ham, telefon ekranidan ham chiqib ketdi. Sahifa yon tomonga suriladi. Overflow darsida "gorizontal skroll bo'lsa, ko'pincha rasm aybdor" degan edik — mana o'sha aybdor. Surat o'rnida data: SVG — Fonlar darsidagi kabi, natija oynasida fayl yo'q.

2. Rasm — satr ichidagi element

2.1 Rasm ostidagi sirli bo'shliq

Rasmni rangli qutiga joylaymiz:

<style>
  :root {
    --rang-urgu: #b4461a;
  }
  div {
    width: 240px;
    margin-bottom: 12px;
    background-color: var(--rang-urgu);
  }
  .blok img {
    display: block;
  }
</style>
<div><img alt="" width="240" height="80"
  src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
  width='240' height='80'><rect width='240' height='80'
  fill='%232f6b3a'/></svg>"></div>
<div class="blok"><img alt="" width="240" height="80"
  src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
  width='240' height='80'><rect width='240' height='80'
  fill='%232f6b3a'/></svg>"></div>

Nimaga qarang: birinchi qutida yashil rasm ostida ingichka qizg'ish chiziq bor. Quti rasmdan balandroq — hech kim padding yoki margin bermagan bo'lsa ham. Chrome'da o'lchadik: rasm 80 piksel, quti esa 84. Ikkinchi qutida (display: block) chiziq yo'q.

Sababi — display darsidan. img — satr ichidagi (inline) element. Brauzer uni matndagi harf kabi tayanch chiziq (baseline) ustiga qo'yadi.

Daftardagi yozuvni eslang: "a", "o" chiziq ustida turadi, "y", "g", "p" ning dumlari esa chiziqdan pastga tushadi. Brauzer har qatorda shu "dumlar" uchun joy qoldiradi. Rasm harf emas, uning dumi yo'q — lekin joy baribir qoladi. Shu 4 piksel — o'sha joy (shriftga qarab o'zgaradi).

Ikki tuzatish:

• display: block — rasm endi qatorda turmaydi, tayanch chiziq ham yo'q. Eng ko'p ishlatiladigan yo'l.
• vertical-align: middle (yoki bottom) — rasm satr ichida qoladi, lekin tayanch chiziqqa emas, o'rtaga tekislanadi. Rasm matn ichida turishi kerak bo'lsa (masalan, kichik ikonka). vertical-align ni Qator balandligi darsida o'rganamiz.

2.2 Rasmlar uchun reset

Deyarli har loyihaning CSS fayli shu qoida bilan boshlanadi:

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

Har qatorning vazifasi:

• display: block — pastdagi bo'shliq yo'q.
• max-width: 100% — rasm hech qachon otasidan keng bo'lmaydi. Otasi tor bo'lsa, rasm kichrayadi.
• height: auto — bo'y endan hisoblanadi, nisbat saqlanadi.

Dars boshidagi osh kartasiga shu qoidani qo'shsangiz, surat karta eniga tushadi va hamma ekranda sig'adi. video ham shu ro'yxatda — u ham rasm kabi o'z nisbatiga ega element (dars oxirida ko'ramiz).

2.3 width: 100% yoki max-width: 100%?

img asoslari darsida width: 100%; height: auto; degan edik, reset'da esa max-width. Qaysi biri to'g'ri? Ikkalasi ham — lekin har xil ishga:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
  }
  div {
    width: 220px;
    margin-bottom: 12px;
    border: 1px dashed var(--rang-asosiy);
  }
  img {
    display: block;
    height: auto;
  }
  .toliq img { width: 100%; }
  .chegara img { max-width: 100%; }
</style>
<div class="toliq"><p>❌ width: 100%</p><img alt="Daraxt belgisi"
  width="80" height="80" src="data:image/png;base64,
  iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAANklEQVR42mP4
  /+sDVsQAZ+lnW+lnW6FLQESR5RjQROFyCAmpWCl0CYgcXALdcqlYKeyuQpMA
  ADljhz25PdYaAAAAAElFTkSuQmCC"></div>
<div class="chegara"><p>✅ max-width: 100%</p><img alt="Daraxt belgisi"
  width="80" height="80" src="data:image/png;base64,
  iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAANklEQVR42mP4
  /+sDVsQAZ+lnW+lnW6FLQESR5RjQROFyCAmpWCl0CYgcXALdcqlYKeyuQpMA
  ADljhz25PdYaAAAAAElFTkSuQmCC"></div>

Nimaga qarang: ikkala qutida ham kichik (80×80) belgi. width: 100% uni quti eniga — 220 pikselga cho'zib yubordi — xira va loyqa, xuddi kichik suratni kattalashtirgandek. max-width: 100% esa rasmni o'z o'lchamida qoldirdi. Rasmning ichi g'alati ko'rinsa — tabiiy: bu 8×8 piksellik kichik rasm, pixelated bo'limida undan yana foydalanamiz.

Katta rasmda ikkalasi bir xil ishlaydi. Farq — kichik rasmda. Shuning uchun reset'da max-width: u hech qachon rasmni "kattalashtirib buzmaydi". width: 100% esa ataylab tanlanadi — rasm doim ustunni to'liq egallashi kerak bo'lganda, masalan menyu kartasining surati. Shunda rasm fayli ham yetarlicha katta bo'lishi kerak (Responsive rasmlar).

2.4 height: auto nega shart

HTML'da height="800" bor. max-width enni 300 ga tushirdi, bo'y-chi? Chrome'da tekshirdik: height: auto yozilmasa, rasm 300×800 bo'lib qoldi — tarelka tuxumga aylandi. Atributdagi bo'y CSS tomonidan o'zgartirilmaguncha amal qiladi. height: auto "bo'yni endan hisobla" deydi — 300×200.

Qoida: rasmning enini CSS'da o'zgartirsangiz, bo'yi uchun doim height: auto.

2.5 Atributlar va aspect-ratio: sakrash yo'q

img asoslari darsida "zamonaviy brauzerlar height: auto da ham atributlardan nisbatni olib, joy ajratadi" degan edik. Buning mexanizmi — O'lchamlar darsidagi aspect-ratio. Chrome'da reset'li rasmni tanlab, DevTools Computed'ga qaradik:

aspect-ratio: auto 1200 / 800

Brauzer atributlardan o'zi aspect-ratio yasagan. auto — "rasm yuklangach, uning haqiqiy nisbatini ol", 1200 / 800 esa — "ungacha shu nisbatni ishlat". Rasm hali yuklanmagan bo'lsa ham, brauzer 300 piksellik enga 200 piksellik bo'y ajratadi. Rasm kelganda matn joyidan siljimaydi — CLS yo'q. Eslatma: CLS (Cumulative Layout Shift) — kech kelgan rasm tufayli sahifaning "sakrashi", Google uni o'lchaydi (img asoslari).

Demak ikkalasi birga kerak: HTML'da haqiqiy width va height, CSS'da max-width: 100%; height: auto. Birinchisi nisbatni aytadi, ikkinchisi o'lchamni ekranga moslaydi.

Tekshirib ko'ring: Rasm width="1600" height="900", reset qo'llangan, ota eni 320 piksel. Rasm ekranda qanday o'lchamda chiqadi va yuklanmasdan oldin brauzer qancha joy ajratadi?

3. object-fit — rasmni joyga moslash

3.1 Bir xil karta, har xil surat

Menyudagi hamma kartada surat bir xil o'lchamda bo'lsin — masalan, 160×120. Lekin Rustam aka yuborgan suratlar har xil: biri keng, biri kvadrat. Rasmga shunchaki width va height bersangiz, brauzer uni shu qutiga cho'zib kiritadi. img asoslari darsidagi xato: "osh tarelkasi cho'zilib, tuxumsimon bo'lib qoladi".

object-fit rasm o'z qutisini qanday to'ldirishini aytadi — xuddi Fonlar darsidagi background-size kabi, lekin img ning o'zi uchun:

<style>
  img {
    width: 160px;
    height: 120px;
    margin: 0 8px 8px 0;
    border: 1px solid #5b6660;
  }
  .toldir { object-fit: fill; }
  .sigdir { object-fit: contain; }
  .qopla { object-fit: cover; }
</style>
<img class="toldir" alt="fill"
  src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
  width='300' height='200' viewBox='0 0 300 200'
  preserveAspectRatio='none'><rect width='300' height='200'
  fill='%23fde2c4'/><circle cx='150' cy='100' r='70'
  fill='%232f6b3a'/></svg>">
<img class="sigdir" alt="contain"
  src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
  width='300' height='200' viewBox='0 0 300 200'
  preserveAspectRatio='none'><rect width='300' height='200'
  fill='%23fde2c4'/><circle cx='150' cy='100' r='70'
  fill='%232f6b3a'/></svg>">
<img class="qopla" alt="cover"
  src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
  width='300' height='200' viewBox='0 0 300 200'
  preserveAspectRatio='none'><rect width='300' height='200'
  fill='%23fde2c4'/><circle cx='150' cy='100' r='70'
  fill='%232f6b3a'/></svg>">

Nimaga qarang: surat 3:2 nisbatda (och fon, o'rtada yashil doira), quti esa 4:3.

• fill (standart) — surat qutiga cho'zildi, doira biroz tik cho'zilgan ellipsga aylandi.
• contain — surat to'liq ko'rinadi, doira tekis, lekin tepada va pastda bo'sh yo'laklar qoldi.
• cover — quti to'liq to'ldi, doira tekis, faqat chap va o'ng chetlar kesildi.

Yana ikki qiymat: none — rasm o'z o'lchamida, quti "deraza" bo'lib uning bir qismini ko'rsatadi. scale-down — none va contain dan qaysi biri kichikroq rasm bersa, o'shani tanlaydi.

Kichik izoh: SVG rasm o'zi nisbatini himoya qiladi va fill da ham cho'zilmaydi. Foto kabi cho'zilsin deb misoldagi SVG'ga preserveAspectRatio='none' qo'shildi. Oddiy JPG va PNG'da buning keragi yo'q.

3.2 object-position — qaysi qismi ko'rinadi

cover rasmning bir qismini kesadi. Standart holatda markaz qoladi (50% 50%). Taom rasmning pastida bo'lsa, u kesilib ketishi mumkin. object-position — background-position bilan bir xil yozuvda:

.taom-karta img {
  object-fit: cover;
  object-position: center bottom;
}

Endi kesish kerak bo'lsa, tepasi kesiladi, pasti — tarelka — saqlanadi. 50% 80% kabi aniq foiz ham mumkin: "pastroq, lekin eng chetda emas".

3.3 aspect-ratio + object-fit — karta surati

Qat'iy height: 120px o'rniga nisbat yaxshiroq: karta enini o'zgartirsangiz, surat bo'yi ham birga o'zgaradi. Menyu kartasining to'liq surati:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-ikkinchi: #5b6660;
  }
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  .taom-karta {
    max-width: 18rem;
    border: 1px solid #c9d6cf;
    border-radius: 12px;
    overflow: clip;
  }
  .taom-karta img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center bottom;
  }
  figure {
    margin: 0;
  }
  figcaption {
    padding: 8px 12px;
    color: var(--rang-ikkinchi);
    font-size: 0.875rem;
  }
</style>
<article class="taom-karta">
  <figure>
    <img alt="Toshkent oshi, ustida bedana tuxumi"
      width="1200" height="600"
      src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
      width='300' height='150' viewBox='0 0 300 150'
      preserveAspectRatio='none'><rect width='300' height='150'
      fill='%23fde2c4'/><circle cx='150' cy='100' r='45'
      fill='%232f6b3a'/></svg>">
    <figcaption>Rustam akaning oshi — har kuni 12:00 dan</figcaption>
  </figure>
</article>

Nimaga qarang: surat fayli 2:1 nisbatda, lekin kartada 4:3 bo'lib chiqdi. Chetlari kesildi, pastdagi yashil "tarelka" esa center bottom tufayli to'liq ko'rinadi. Karta burchaklari yumaloq, surat ham ular bo'ylab kesilgan — Chegara va soyalar darsidagi overflow: clip hiylasi.

Uch narsaga e'tibor bering:

• CSS'dagi aspect-ratio: 4 / 3 atributdan kelgan auto 1200 / 600 ni bosib ketdi. Chrome'da o'lchadik: 300 piksellik enda surat 300×225 chiqdi.
• object-fit faqat rasmning qutisi uning o'z nisbatidan farq qilganda ishlaydi. Faqat width bersangiz, bo'y o'zi hisoblanadi — kesadigan narsa qolmaydi.
• figure ning brauzer bergan chap-o'ng 40 piksellik margin'i (Box model) margin: 0 bilan olib tashlandi. figure va figcaption darsida "figcaption ko'rinishini CSS bilan xohlagancha o'zgartirasiz" degan edik — mana: kichikroq, kulrang, ichki bo'sh joy bilan.

Tekshirib ko'ring: Stajyor .taom-karta img { width: 100%; object-fit: cover; } yozdi, lekin rasmlar baribir har xil balandlikda chiqyapti. Nima yetishmayapti?

4. Rasm kelguncha: o'rinbosar

Rasm unumdorligi darsida placeholder (o'rinbosar) — rasm kelguncha ko'rinadigan vaqtinchalik ko'rinish usullarini tanishtirgan edik. "Bu usullarni CSS'ni o'rgangach qo'llaysiz" degandik. Ikki CSS usuli:

• Asosiy rang. Rasmga suratning asosiy rangida background-color bering. Atributlar tufayli joy oldindan ajratilgan — rasm kelguncha shu joy rangli bo'lib turadi, keyin surat uni yopadi.
• LQIP ("past sifatli o'rinbosar rasm") — juda kichik (masalan, 6×4 piksellik) nusxani fon rasmi qilib, background-size: cover bilan cho'zish. Brauzer kichik rasmni kattalashtirganda uni silliqlaydi — xira, rangli dog' chiqadi.

<style>
  .rasm-orni {
    width: 240px;
    aspect-ratio: 3 / 2;
    margin-bottom: 8px;
    background-color: #fde2c4;
  }
  .lqip {
    background-image: url("data:image/png;base64,\
iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAIAAAAiZtkUAAAAJklEQVR42mP4\
++gIGmL4++jIFjcpCIIKbXGT0s+20s+2gjCwqwIAVOMtZJMj45oAAAAASUVO\
RK5CYII=");
    background-size: cover;
  }
</style>
<div class="rasm-orni"></div>
<div class="rasm-orni lqip"></div>

Nimaga qarang: birinchisi — bir rangli qum rang to'rtburchak, ikkinchisi — xira, rangli dog'lar. Ikkalasi ham haqiqiy surat kelguncha ko'rinadigan holat. Namoyish uchun div ishlatdik, real sahifada bu qoidalar img ning o'ziga yoziladi. LQIP rasmi bor-yo'g'i yuz baytcha — u sahifa bilan birga darhol yuklanadi.

Ehtiyot bo'ling: shaffof joyli PNG yoki SVG'da o'rinbosar rang rasm kelgandan keyin ham shaffof joylardan ko'rinib qoladi. Bu usul — faqat to'liq suratlar uchun.

5. image-rendering: pixelated — tiniq piksellar

Brauzer kichik rasmni kattalashtirganda uni silliqlaydi. Foto va LQIP uchun bu yaxshi. Lekin piksel-art, kichik ikonka yoki QR-kod uchun — yomon: aniq kataklar xira dog'ga aylanadi. image-rendering: pixelated silliqlashni o'chiradi — har piksel aniq kvadrat bo'lib kattalashadi:

<style>
  img {
    width: 96px;
    height: 96px;
    margin-right: 16px;
  }
  .tiniq {
    image-rendering: pixelated;
  }
</style>
<img alt="Daraxt (odatiy)" src="data:image/png;base64,
  iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAANklEQVR42mP4
  /+sDVsQAZ+lnW+lnW6FLQESR5RjQROFyCAmpWCl0CYgcXALdcqlYKeyuQpMA
  ADljhz25PdYaAAAAAElFTkSuQmCC">
<img class="tiniq" alt="Daraxt (pixelated)"
  src="data:image/png;base64,
  iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAANklEQVR42mP4
  /+sDVsQAZ+lnW+lnW6FLQESR5RjQROFyCAmpWCl0CYgcXALdcqlYKeyuQpMA
  ADljhz25PdYaAAAAAElFTkSuQmCC">

Nimaga qarang: ikkalasi ham bir xil 8×8 piksellik rasm, 12 barobar kattalashtirilgan. Chapdagisi — xira yashil dog'. O'ngdagisi — aniq kataklardan yasalgan daraxt, xuddi eski o'yinlardagidek. image-rendering hamma asosiy brauzerda bor (Baseline, keng tarqalgan).

Real misol: «Bahor» Click yoki Payme uchun to'lov QR-kodini kichik PNG qilib qo'ysa, pixelated uni katta ekranda ham tiniq ko'rsatadi — telefon kamerasi osonroq o'qiydi.

6. SVG ikonka matn rangida

SVG HTML ichida darsida "CSS uning rangi va o'lchamini boshqara oladi" degan edik. HTML ichidagi SVG — oddiy element, CSS unga to'g'ridan-to'g'ri ta'sir qiladi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  a {
    color: var(--rang-asosiy);
  }
  a:hover {
    color: var(--rang-urgu);
  }
  .ikonka {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.25em;
    fill: currentColor;
  }
</style>
<p><a href="tel:+998900000000">
  <svg class="ikonka" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M6 2h4l2 5-3 2a11 11 0 0 0 6 6l2-3 5 2v4a2 2 0 0 1
      -2 2A18 18 0 0 1 4 4a2 2 0 0 1 2-2z"/>
  </svg>
  +998 90 000 00 00</a></p>

Nimaga qarang: telefon ikonkasi matn bilan bir xil yashil. Sichqonchani havolaga olib boring — ikonka ham matn bilan birga qizg'ishga o'tadi. fill: currentColor — "matn rangida bo'ya" (Meros darsidagi currentColor). 1.25em — ikonka shrift bilan birga kattalashadi. vertical-align ikonkani qatorning o'rtasiga tushiradi (Qator balandligi darsida batafsil). SVG va CSS'ning to'liq imkoniyatlari — SVG va CSS darsida.

7. video va iframe — moslashuvchan

7.1 video — rasm kabi

video ham width va height atributlaridan nisbat oladi. Chrome'da tekshirdik: width="1280" height="720" li video uchun Computed'da aspect-ratio: auto 1280 / 720. Shuning uchun rasmlar reset'i unga ham ishlaydi: max-width: 100%; height: auto — va video ekranga moslashadi.

7.2 iframe — nisbatni CSS beradi

iframe boshqacha: uning atributlari nisbat bermaydi (Chrome'da Computed'da shunchaki aspect-ratio: auto). width: 100%; height: auto yozsangiz, bo'y brauzerning standart 150 pikseliga qaytadi:

<style>
  iframe {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 12px;
    border: 0;
    background-color: #e8f1ec;
  }
  .nisbatli {
    aspect-ratio: 4 / 3;
  }
</style>
<div style="max-width: 20rem">
  <iframe title="Xarita — nisbatsiz" width="600" height="450"
          srcdoc="<p>❌ Xarita (nisbatsiz)</p>"></iframe>
  <iframe class="nisbatli" title="Xarita: Choyxona «Bahor»"
          width="600" height="450"
          srcdoc="<p>✅ Xarita (4 / 3)</p>"></iframe>
</div>

Nimaga qarang: ikkala oyna ham 20rem eniga moslashdi. Birinchisi yassi — 150 piksel baland. Ikkinchisi to'g'ri 4:3 nisbatda. aspect-ratio ni O'lchamlar darsida ko'rgan edingiz — mana uning eng ko'p ishlatiladigan joyi. YouTube videolari uchun — 16 / 9.

iframe darsida xarita xizmatining kodidagi style ni "CSS'ni o'rgangach ko'chirasiz" degan edik. Endi style="border:0;" Chegara darsidagi border: 0 ga, o'lchamlar esa aspect-ratio ga ko'chdi. HTML'da faqat haqiqiy nisbatni bildiruvchi width va height atributlari qoladi.

8. Ko'p uchraydigan xatolar

8.1 Rasm ostida bo'shliq

Rangli quti yoki karta ichida rasm ostida 3–5 piksel. Tuzatish: display: block.

8.2 Kichik rasm xira

img { width: 100%; } kichik logotipni cho'zib yubordi. Tuzatish: max-width: 100%. width: 100% — faqat yetarlicha katta rasm uchun.

8.3 Rasm cho'zildi

max-width: 100% bor, height: auto yo'q — HTML'dagi height bo'yni ushlab qoldi. Tuzatish: height: auto.

8.4 object-fit ishlamayapti

Rasmga faqat en berilgan, yoki object-fit div ga yozilgan. object-fit faqat img, video kabi o'z ichki rasmi bor elementlarda va quti nisbati rasmnikidan farq qilganda ishlaydi. Tuzatish: aspect-ratio yoki height qo'shing. div ning fon rasmi uchun — background-size.

8.5 iframe 150 piksel

height: auto bilan iframe yassi bo'lib qoldi. Tuzatish: aspect-ratio: 16 / 9 (video) yoki xarita nisbati.

8.6 Atributlar olib tashlandi

"O'lchamni CSS beradi-ku" deb width/height atributlari o'chirildi. Rasm kelguncha 0 balandlik — sahifa sakraydi. Tuzatish: atributlar qolsin, ular nisbat uchun.

9. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): O'lchamni ayting

Ota eni 300 piksel. Rasm width="1200" height="800".

• img { max-width: 100%; height: auto; } — [:300] × [:200]
• img { max-width: 100%; } — 300 ×
• Xuddi shu qoidalar, lekin rasm width="120" height="80" bo'lsa, max-width: 100%; height: auto — [:120] × 80, width: 100%; height: auto — 300 × [:200]

Ishora: max-width faqat kichraytiradi; height: auto nisbatni saqlaydi.

2-mashq (o'rta): Menyu kartalari bir xil bo'lsin

«Bahor» menyusida ikki karta: lag'mon surati keng (2:1), manti surati — kvadrat (1:1). Kartalar yonma-yon turadi va suratlar bir xil balandlikda bo'lishi kerak.

1. Rasmlar uchun reset.
2. Karta suratlari: karta enini to'liq egallasin, nisbati 3:2, kesilsa ham buzilmasin.
3. Surat karta burchaklari bo'ylab yumaloq kesilsin.

Suratlar o'rniga natijada data: SVG ishlating (misollardagidek).

Ishora: "aspect-ratio + object-fit" bo'limidagi karta. width: 100% bu yerda to'g'ri tanlov — surat ustunni to'liq egallashi kerak. Kartalarni yonma-yon qo'yish — display: inline-block (display).

<style>
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  .taom-karta {
    display: inline-block;
    width: 10rem;
    margin: 0 8px 8px 0;
    border: 1px solid #c9d6cf;
    border-radius: 12px;
    overflow: clip;
  }
  .taom-karta img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }
  .taom-nomi {
    margin: 8px 12px;
  }
</style>
<article class="taom-karta">
  <img alt="Lag'mon" width="600" height="300"
    src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
    width='200' height='100' viewBox='0 0 200 100'
    preserveAspectRatio='none'><rect width='200' height='100'
    fill='%23fde2c4'/><circle cx='100' cy='50' r='40'
    fill='%23b4461a'/></svg>">
  <h3 class="taom-nomi">Lag'mon</h3>
</article>
<article class="taom-karta">
  <img alt="Manti" width="500" height="500"
    src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
    width='100' height='100' viewBox='0 0 100 100'
    preserveAspectRatio='none'><rect width='100' height='100'
    fill='%23e8f1ec'/><circle cx='50' cy='50' r='35'
    fill='%232f6b3a'/></svg>">
  <h3 class="taom-nomi">Manti</h3>
</article>

3-mashq (qiyin): Aloqa sahifasi — xarita va video

«Bahor»ning aloqa sahifasida (aloqa/) xarita iframe i va qisqa tanishtiruv videosi bor. Xarita xizmati bergan kod:

<iframe src="https://example.com/xarita"
  width="600" height="450" style="border:0;"
  title="Xarita: Choyxona «Bahor», Chilonzor"
  loading="lazy"></iframe>
<video src="../assets/files/bahor.mp4" width="1280" height="720"
  controls></video>

1. HTML'dan inline stilni olib tashlang (CSP uni baribir to'sadi).
2. Xarita ham, video ham telefonda ekranga sig'sin, nisbatlari saqlansin: xarita — atributlardagi nisbatda, video — 16:9.
3. Ostida bo'shliq qolmasin.

Ishora: video nisbatni atributlardan oladi, iframe — yo'q. Xarita nisbatini atributlardan hisoblang: 600 / 450.

<iframe src="https://example.com/xarita"
  width="600" height="450"
  title="Xarita: Choyxona «Bahor», Chilonzor"
  loading="lazy"></iframe>
<video src="../assets/files/bahor.mp4" width="1280" height="720"
  controls></video>

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
}

4-mashq: Portfolio qadami — rasm ekranga sig'adi

Portfoliongizning bosh sahifasidagi rasm (width="480" height="320") telefonda ustundan chiqib ketadi. Bu Matematik funksiyalar darsida main ga min(100% - 2rem, 70ch) en berganingizdan beri shunday: 360 piksellik ekranda ustun ~312 piksel, rasm esa 480. Loyiha sahifasidagi skrinshot (600) ham xuddi shunday.

1. asosiy.css ga rasmlar uchun reset qo'shing.
2. Bosh sahifadagi rasmning burchaklarini 0.5rem yumaloqlang — kartalar bilan bir uslubda.
3. Loyiha sahifasidagi figure ning brauzer margin'ini olib tashlang, figcaption ni kichikroq va ikkinchi darajali rangda qiling.
4. DevTools'da 360 piksel enda tekshiring: gorizontal skroll yo'q, rasm ustunga to'liq sig'adi.

Ishora: reset — "Rasmlar uchun reset" bo'limida. Portfolio'da class yo'q — teg selektorlari yetarli: main > img, figure, figcaption. Ranglar — --rang-ikkinchi.

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

main > img {
  border-radius: 0.5rem;
}

figure {
  margin: 0;
}

figcaption {
  margin-top: 0.5rem;
  color: var(--rang-ikkinchi);
  font-size: 0.875rem;
}

<style>
  :root {
    --rang-matn: #1f2a24;
    --rang-fon: #f7faf8;
    --rang-asosiy: #1f6f4a;
  }
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    color: var(--rang-matn);
    background-color: var(--rang-fon);
  }
  main {
    width: min(100% - 2rem, 70ch);
    margin-inline: auto;
  }
  h1 {
    color: var(--rang-asosiy);
  }
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  main > img {
    border-radius: 0.5rem;
  }
</style>
<main id="asosiy">
  <h1>Salom, men Aziz — boshlovchi frontend dasturchiman</h1>
  <p>Veb-saytlarni noldan o'rganyapman.</p>
  <img alt="Noutbukda ochiq turgan HTML kod"
    width="480" height="320"
    src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
    width='480' height='320'><rect width='480' height='320'
    fill='%231f2a24'/><rect x='40' y='60' width='240' height='16'
    fill='%231f6f4a'/><rect x='40' y='100' width='320' height='16'
    fill='%23c9d6cf'/><rect x='80' y='140' width='200' height='16'
    fill='%23c9d6cf'/></svg>">
</main>

10. Real ishda

• Reset — img, video { display: block; max-width: 100%; height: auto; } deyarli har loyihada, ko'pincha CSS reset faylining ichida. Tailwind (kursda alohida o'rganamiz) ham aynan shu qoidani o'zi qo'shadi.
• Onlayn do'kon va yetkazib berish ilovalari — mahsulot suratlari har xil o'lchamda keladi. Ro'yxatda esa hammasi aspect-ratio + object-fit: cover bilan bir xil kartaga tushadi.
• CLS — Lighthouse va PageSpeed hisobotida alohida ko'rsatkich. O'lchamsiz rasm — uning keng tarqalgan sabablaridan biri (HTML sahifani audit qilish).
• Rasmlarning CSS tomoni davomi — image-set(), fon rasmlarini ekran eniga qarab almashtirish — Rasmlar: CSS tomoni darsida.
• Intervyuda so'raladi: "Rasm ostidagi bo'shliq qayerdan keladi?", "object-fit: cover va contain farqi?", "width/height atributlari CLS'ga qanday yordam beradi?".

Xulosa

• img — satr ichidagi element: tayanch chiziq tufayli ostida bo'shliq; display: block yoki vertical-align.
• Reset: display: block; max-width: 100%; height: auto; — max-width faqat kichraytiradi, width: 100% kichik rasmni ham cho'zadi.
• HTML atributlari brauzerda aspect-ratio: auto W / H bo'ladi — rasm kelguncha joy tayyor, CLS yo'q.
• object-fit: cover/contain + object-position — rasmni belgilangan joyga buzmasdan; kerakli nisbat — aspect-ratio.
• image-rendering: pixelated — piksel-art va QR-kod uchun; SVG ikonka — fill: currentColor.
• video nisbatni atributlardan oladi, iframe — yo'q: unga aspect-ratio kerak.

Keyingi dars: Shrift asoslari — font-family, shrift steklari va o'lcham: saytning matni qanday ko'rinishini tanlaymiz.

Manbalar

• MDN: "object-fit", "object-position", "aspect-ratio", "image-rendering", "vertical-align", "Responsive images" — developer.mozilla.org
• web.dev: "Optimize Cumulative Layout Shift" — web.dev/articles/optimize-cls
• W3C: "CSS Images Module Level 3" (object-fit, image-rendering) — w3.org/TR/css-images-3
• HTML Standard: "Mapping to aspect-ratio" (atributlardan nisbat) — html.spec.whatwg.org