CSS object-position
CSS object-position xossasi
CSS object-position xossasi
object-fit xossasi bilan birgalikda <img> yoki <video> elementining konteyner ichida x/y koordinatalari bilan qanday joylashtirilishini belgilash uchun ishlatiladi.
Birinchi qiymat x o‘qini, ikkinchi qiymat esa y o‘qini boshqaradi. Qiymat string (left, center yoki right) yoki son (px yoki % birligida) bo‘lishi mumkin. Manfiy qiymatlarga ham ruxsat beriladi.
object-position xossasidan foydalanish
Faraz qilaylik, rasmning ko‘rsatilayotgan qismi biz xohlagan qism emas. Rasmni joylashtirish uchun
object-position xossasidan foydalanamiz.
Bu yerda rasmni ulug‘vor eski bino markazda bo‘ladigan qilib joylashtiramiz:
Misol
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 80%
100%;
}
O'zingiz sinab ko'ring »
Bu yerda rasmni mashhur Eyfel minorasi markazda bo‘ladigan qilib joylashtirish uchun object-position xossasidan foydalanamiz:
Misol
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 15%
100%;
}
O'zingiz sinab ko'ring »
CSS Object-* Properties
Quyidagi jadval CSS object-* xossalarini sanab o‘tadi:
| Xossa | Description |
|---|---|
| object-fit | <img> yoki <video> elementining konteyneriga sig‘ishi uchun o‘lchami qanday o‘zgartirilishini belgilaydi |
| object-position | <img> yoki <video> elementining o‘z "kontent qutisi" ichida x/y koordinatalari bilan qanday joylashtirilishini belgilaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!