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касиети