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;
}