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ගුණාංගය,
මූලද්රව්යයක දර්ශන අනුපාතය නිර්වචනය කරයි