`object-fit` bu css xususiyati bo‘lib, element konteyneriga sig‘ishi uchun


Download 7.2 Kb.
Pdf ko'rish
Sana17.06.2023
Hajmi7.2 Kb.
#1530283
Bog'liq
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