Кириш:
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
vaobject-position
CSS propertylari uchun mavjud qiymatlarni o’rgandingiz. -
object-fit
haminherit
,initial
vaunset
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?