`object-fit` bu css xususiyati bo‘lib, element konteyneriga sig‘ishi uchun
Download 7.2 Kb. Pdf ko'rish
|
Mahammadjonov 1
`object-fit` - bu CSS xususiyati bo‘lib, element konteyneriga sig‘ishi uchun o‘lchamini qanday o‘zgartirish kerakligini belgilash imkonini beradi. Sukut bo'yicha `img` tegi yoki `background-image` xususiyatiga ega elementlar tabiiy o'lchamida ko'rsatiladi. Bu shuni anglatadiki, agar idish rasmdan kichikroq bo'lsa, tasvir konteynerdan tashqariga to'lib ketadi. `object-fit` yordamida siz quyidagi qiymatlardan birini qo'llash orqali tasvirning konteyner ichida qanday moslashishini belgilashingiz mumkin: * `fill`: Tasvirning oʻlchami oʻzgartirilib, uning idishini toʻliq toʻldiradi, hattoki bu tasvirni choʻzsa yoki qirralarini qirqsa ham. * `contain`: Tasvir o‘z konteyneriga to‘liq sig‘ishi uchun o‘lchamli bo‘ladi. Bu `background-size: contain`ga oʻxshaydi. * `cover`: Tasvir butun idishni qoplaydigan darajada oʻlchamli boʻladi, agar kerak boʻlsa, qirralari kesiladi. Bu `background-size: cover`ga o'xshaydi. * `none`: Rasm asl o‘lchamida ko‘rsatiladi va uning o‘lchami uning konteyneriga sig‘ishi uchun o‘zgartirilmaydi. * `miqyosni pasaytirish`: Tasvir konteynerdan kattaroq bo‘lsa, uning konteyneriga sig‘ishi uchun kichraytiriladi, lekin kichikroq bo‘lsa, asl o‘lchamida ko‘rsatiladi. Mana, CSS-da `object-fit`-dan qanday foydalanishga misol: ``` img { width: 200px; height: 200px; object-fit: cover; /* or fill, contain, none, or scale-down */ } ``` Ushbu misolda `img` elementi 200px x 200px oʻlchamlarida koʻrsatiladi va `object- fit` xususiyati `cover` ga oʻrnatiladi. . Bu tasvir chekkalarini kesishni anglatsa ham, butun konteynerni qoplaydigan darajada oʻlchamini bildiradi. Umid qilamanki, bu sizga CSS-dagi `object-fit` xususiyatidagi mustaqil ishingizda yordam beradi! Download 7.2 Kb. Do'stlaringiz bilan baham: |
Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©fayllar.org 2024
ma'muriyatiga murojaat qiling
ma'muriyatiga murojaat qiling