CSS object-fit

CSS object-fit xossasi

CSS object-fit xossasi <img> yoki <video> elementining konteyneriga sig‘ishi uchun o‘lchami qanday o‘zgartirilishini belgilashda ishlatiladi.

Bu xossa quyidagi qiymatlardan birini qabul qilishi mumkin:

fill — Bu standart qiymat. Tomonlar nisbatini saqlamaydi. Rasm o‘lchami konteynerni to‘ldiradigan qilib o‘zgartiriladi (rasm sig‘ishi uchun cho‘ziladi yoki siqiladi).
cover — Tomonlar nisbatini saqlaydi va rasm konteynerni to‘ldiradi. Kerak bo‘lsa, sig‘may qolgan qismini kesib tashlaydi.
contain — Tomonlar nisbatini saqlaydi va rasmni kesmasdan konteyner ichiga sig‘diradi — kerak bo‘lsa, bo‘sh joy qoldiradi.
none — Rasm o‘lchami o‘zgartirilmaydi.
scale-down — rasm none yoki contain. variantlarining eng kichigigacha kichraytiriladi

Using object-fit: fill;

object-fit: fill; qiymati tomonlar nisbatini saqlamaydi va rasm o‘lchami konteynerni to‘ldiradigan qilib o‘zgartiriladi (rasm sig‘ishi uchun cho‘ziladi yoki siqiladi):

Misol

.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}

.image-container img {
width: 100%;
height: 100%;
object-fit: fill;
}

O'zingiz sinab ko'ring »

Using object-fit: cover;

object-fit: cover; qiymati tomonlar nisbatini saqlaydi va rasm konteynerni to‘ldiradi. Rasm sig‘ishi uchun kesiladi:

Misol

.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}

.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}

O'zingiz sinab ko'ring »

Using object-fit: contain;

object-fit: contain; qiymati tomonlar nisbatini saqlaydi va rasmni kesmasdan konteyner ichiga sig‘diradi — kerak bo‘lsa, bo‘sh joy qoldiradi:

Misol

.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}

.image-container img {
width: 100%;
height: 100%;
object-fit: contain;
}

O'zingiz sinab ko'ring »

Using object-fit: none;

object-fit: none; qiymati rasm o‘lchamini o‘zgartirmaydi va uni masshtablamaydi:

Misol

.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}

.image-container img {
width: 100%;
height: 100%;
object-fit: none;
}

O'zingiz sinab ko'ring »

Using object-fit: scale-down;

object-fit: scale-down; qiymati rasmni none yoki contain variantlarining eng kichigigacha kichraytiradi:

Misol

.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}

.image-container img {
width: 100%;
height: 100%;
object-fit: scale-down;
}

O'zingiz sinab ko'ring »

Yana bir misol

Bu yerda ikkita rasm bor va biz ular brauzer oynasi kengligining 50 foizini hamda konteyner balandligining 100 foizini to‘ldirishini xohlaymiz.

Quyidagi misolda object-fit ishlatilmagan, shuning uchun brauzer oynasi o‘lchamini o‘zgartirganimizda rasmlarning tomonlar nisbati buziladi:

Misol

O'zingiz sinab ko'ring »

Keyingi misolda object-fit: cover; ishlatilgan, shuning uchun brauzer oynasi o‘lchamini o‘zgartirganimizda rasmlarning tomonlar nisbati saqlanib qoladi:

Misol

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!

Ro'yxatdan o'tish Kirish