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

Кириш:

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 propertyysidan 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?