object-fit хусусияти
object-fit хусусияти
расм ёки видео каби элементларнинг
томонлар нисбати ёки масштабини
белгилайди.
Синтаксис
селектор {
object-fit: fill ёки contain ёки cover ёки none;
}
object-fit хусусияти учун
асосий қийматлар жадвалда келтирилган:
Қийматлар
| Қиймат | Изоҳ |
|---|---|
fill |
Элементнинг пропорциялари инкор этилиши билан, белгиланган ўлчамларга мос келиши учун элементни масштаблаш. |
contain |
Элементнинг пропорциялари сақланиши билан, белгиланган ўлчамларга мос келиши учун элементни масштаблаш. |
cover |
Элементнинг пропорциялари сақланиши билан, кўрсатилган соҳани тўлиқ тўлдириш учун элемент ўлчамларини ўзгартириш. |
none |
Элементнинг бошланғич ўлчамлари сақланади. |
Мисол
>Келтирилган расмга пропорцияларни сақламасдан, белгиланган ўлчамни тўлдиришни белгилаймиз:
<div>
<img src="bg.png">
</div>
img {
object-fit: fill;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Мисол
>Энди расм пропорцияларни сақлаб, белгиланган контейнерни тўлдирсин деб қилайлик:
<div>
<img src="bg.png">
</div>
img {
object-fit: contain;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Мисол
>Келтирилган расм ўзининг пропорциялари сақланиши билан, белгиланган контейнерни тўлдирсин ва ўлчами ўзгарсин деб қилайлик:
<div>
<img src="bg.png">
</div>
img {
object-fit: cover;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Мисол
>Келтирилган расм ўзининг бошланғич ўлчамлари сақланган ҳолда, белгиланган контейнерга жойлашунини белгилаймиз:
<div>
<img src="bg.png">
</div>
img {
object-fit: none;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Қуйидаларни ҳам кўринг
-
элементнинг томонлар нисбатини белгиловчи
aspect-ratioхусусияти