object-fit
Misol
Rasmning tomonlar nisbatini saqlagan holda uning chetlarini qirqib tashlang va bo‘sh joyni to‘ldiring:
img.a {
width: 200px;
height: 400px;
object-fit: cover;
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
object-fit xususiyati <img> yoki <video> o‘z konteyneriga sig‘ishi uchun o‘lchami qanday o‘zgartirilishi kerakligini belgilash uchun ishlatiladi.
Bu xususiyat kontentga konteynerni turli usullarda to‘ldirishni buyuradi, masalan, "tomonlar nisbatini saqlash" yoki "cho‘zilib, iloji boricha ko‘proq joy egallash".
| Standart qiymat: | alohida xususiyatlarga qarang |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.objectFit="cover" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| object-fit | 31.0 | 16.0 | 36.0 | 7.1 | 19.0 |
CSS sintaksisi
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| fill | Bu standart qiymat. Tomonlar nisbati saqlanmaydi. Rasm/video konteynerni to‘ldirish uchun o‘lchami o‘zgartiriladi (sig‘ishi uchun cho‘ziladi yoki siqiladi) | Demo ❯ |
| contain | Tomonlar nisbatini saqlaydi va rasm/videoni kesmasdan konteyner ichiga sig‘diradi — kerak bo‘lsa, bo‘sh joy qoldiradi | Demo ❯ |
| cover | Tomonlar nisbatini saqlaydi va rasm/video konteynerni to‘ldiradi. Kerak bo‘lsa, toshib chiqqan qismini kesib tashlaydi | Demo ❯ |
| none | Rasm/video o‘lchami o‘zgartirilmaydi | Demo ❯ |
| scale-down | Rasm/video none yoki contain variantlaridan qaysi biri kichikroq bo‘lsa, o‘shangacha kichraytiriladi | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Tegishli sahifalar
CSS darsligi: CSS object-fit
CSS ma’lumotnomasi: CSS object-position
HTML DOM ma’lumotnomasi: objectFit xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!