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
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?
Top comments (0)