object-position
Misol
Rasm o‘lchamini uning kontent qutisiga sig‘adigan qilib o‘zgartiring va rasmni kontent qutisi ichida chapdan 5px, yuqoridan 10px masofada joylashtiring:
img.a {
width: 200px;
height: 400px;
object-fit: cover;
object-position: 5px 10px;
border: 5px solid red;
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
object-position xususiyati object-fit bilan birga ishlatilib, <img> yoki <video> o‘zining "kontent qutisi" ichida x/y koordinatalar yordamida qanday joylashtirilishini belgilaydi.
| Standart qiymat: | 50% 50% |
|---|---|
| Meros qilinadi: | ha |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.objectPosition="0 10%" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
CSS sintaksisi
object-position: position|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| position | Rasm yoki videoning o‘z kontent qutisi ichidagi joylashuvini belgilaydi. Birinchi qiymat x o‘qini, ikkinchi qiymat y o‘qini boshqaradi. String (left, center yoki right) yoki son (px yoki % da) bo‘lishi mumkin. Manfiy qiymatlarga ruxsat beriladi | Sinab ko‘ring » |
| 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-fit
HTML DOM ma’lumotnomasi: objectPosition xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!