CSS object-fit bilan rasmlarni masshtabini to'girlash va kesish.

Kirish:

Bazida rasmlar bilan ishlashda asl tomonlar nisbati(aspect ratio)ni saqlab qolishga to'g'ri keladi. Tomonlar nisbatini saqlab qolish rasmlarni cho‘zilgan yoki siqilgan holda ko‘rinishini oldini oladi. Ushbu muammoning eng sodda yechimi background-image CSS propertydan foydalanishdir. Zamonaviyroq yo'li esa object-fit CSS propertysidan foydalanish.

Ushbu maqolada siz object-fit CSS xususiyati uchun mavjud bo'lgan fill, cover, contain, none va scale-down qiymatlarining ta'sirini va bu qiymatlar qanday qilib rasmlarni kesishi va masshtablashi mumkinligini o'rganasiz. Shuningdek, siz object-position CSS xususiyatini va u tasvirlarni qanday o'zgartirishi mumkinligini ham o'rganasiz.

Namuna rasmni ko'rsatish uchun ishlatilgan quyidagi kodni ko'rib chiqamiz:

<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 600px; height: 337px;"
  alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 600 x 337."
/>

Ushbu kod brauzerda quyidagi natijani beradi:

Ushbu rasmning asl kengligi 1200px va balandligi 674px. img atributlaridan foydalanib, eni 600 va 337 ga o'rnatildi - asl o'lchamlarning yarmi - tomonlar nisbatini saqlab qolgan holda.

Endi, huddi shu rasmni kengligi 300 piksel va balandligi 337 piksel bo'lgan vaziyatni ko'rib chiqamiz:

<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px;"
  alt="Sample image of a tutle riding on top of an alligator that is swimming in the water - scaled to 300 x 337."
/>

Ushbu kod brauzerda quyidagi natijani beradi:

Rasm endi asl tomonlar nisbati(aspect ratio)ni saqlamaydi va "siqilgan" holatda ko'rinadi.

object-fit: fill dan foydalanish:

fill qiymati object-fit uchun dastlabki qiymatdir. Bu qiymat asl tomonlar nisbatini saqlamaydi.

<img
  ...
  style="width: 300px; height: 337px; object-fit: fill;"
  ...
/>

Ushbu kod brauzerda quyidagi natijani beradi:

Bu brauzerni default qiymati bo'lganligi tufayli tasvirda hechqanday o'zgarish yo'q ya'ni rasm haliyam siqilgan holda ko'rinmoqda.

object-fit: cover dan foydalanish:

cover qiymati asl tomonlar nisbatini saqlaydi, lekin rasm unga ajratilgan barcha bo'sh joyni egallaydi.

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover;"
  ...
/>

Ushbu kod brauzerda quyidagi natijani beradi:

Muayyan holatlarda object-fit: cover rasmni kesilgan holda ko'rinishiga sabab bo'ladi. Yuqoridagi misolda, rasmning chap va o'ngdagi ayrim qismlari ko'rinmaydi, chunki u qismlar rasm uchun ajratilgan kenglik chegarasiga sig'maydi.

object-fit: contain dan foydalanish:

contain qiymati asl tomonlar nisbatini saqlaydi, lekin rasm ham unga ajratilgan bo'sh joy chegarasidan oshmaydi ya'ni to'liq tasvirni unga ajratilgan joyga sig'dirib ko'rsatadi.

<img
  ...
  style="width: 300px; height: 337px; object-fit: contain;"
  ...
/>

Ushbu kod brauzerda quyidagi natijani beradi:

Muayyan holatlarda object-fit: contain tasvirning barcha mavjud bo'sh joyini to'ldirmasligi ham mumkin. Ushbu rasmda tasvirning tepasida va tagida vertikal bo'sh joy mavjud, chunki ajratilgan balandlik kichraytirilgan balandlikdan balandroqdir.

object-fit: none dan foydalanish:

none qiymati tasvir razmerini umuman o'zgartirmaydi.

<img
  ...
  style="width: 300px; height: 337px; object-fit: none;"
  ...
/>

Ushbu kod brauzerda quyidagi natijani beradi:

Rasmning razmeri mavjud bo'sh joydan kattaroq bo'lgan hollarda, u kesilgan holatda ko'rinadi. Ushbu rasmda asl tasvirning chap, o'ng, yuqori va pastki qismidagi ba'zi qismlari ko'rinmaydi, chunki ular e'lon qilingan kenglik va balandlik chegaralariga sig'maydi.

object-fit: scale-down dan foydalanish:

scale-down qiymati, qaysi biri kichikroq rasm holatiga olib kelishiga qarab yoki contain yoki none dek ko'rsatadi rasmni.

<img
  ...
  style="width: 300px; height: 337px; object-fit: scale-down;"
  ...
/>

Ushbu kod brauzerda quyidagi natijani beradi:

Ushbu misoldagi rasmda tasvir contain qiymati bilan bir hil holatga kichraytirilgan.

object-fit va object-position dan foydalanish:

Agar object-fit natijasida olingan tasvir kesilgan holda ko'rinsa, by default tasvir markazda ko'rinadi. object-position propertysidan fokus nuqtasini o'zgartirish uchun foydalanish mumkin.

Oldingi object-fit: cover misolini ko'rib chiqaylik:

Keling, rasmning o'ng tomonini ochish uchun tasvirning ko'rinadigan qismini X o'qi bo'ylab o'zgartiramiz:

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover; object-position: 100% 0;"
  ...
/>

Ushbu kod brauzerda quyidagi natijani beradi:

Ushbu misoldagi rasmida toshbaqa tasvirdan kesilib chiqib ketdi.
Va nihoyat, keling, agar pozitsiya mavjud bo'sh joydan tashqarida ko'rsatilgan bo'lsa, nima bo'lishini ko'rib chiqamiz:

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover; object-position: -20% 0;"
  ...
/>

Ushbu kod brauzerda quyidagi natijani beradi:

Ushbu misoldagi rasmida toshbaqa va alligator boshlari tasvirdan kesilgan. Tasvirning chap tomonidagi ofsetning 20% ni tashkil qilish uchun oraliq bo'sh joy ham mavjud.

Xulosa:

• Ushbu maqolada siz object-fit va object-position CSS propertylari uchun mavjud qiymatlarni o'rgandingiz.

• object-fit ham inherit, initial va unset qiymatlarini ham qabul qiladi.

• Loyihangizda object-fit dan foydalanishdan oldin, brouzeringiz bu propertyni qo'llab quvvatlay oladimi yo'qmi tekshirib oling.

Sabr bilan ohirigacha o'qiganingiz uchun rahmat, yana qaysi mavzularda maqola yozishimni xohlaysiz?