object-fit ගුණාංගය

object-fit ගුණාංගය රූපයක් හෝ වීඩියෝවක් වැනි මූලද්‍රව්‍යවල දර්ශන අනුපාතය හෝ පරිමාණනය සකස් කරයි.

වාක්‍ය රචනය

cssතේරුම් ගන්නා {
  object-fit: fill හෝ contain හෝ cover හෝ none;
}

පහත වගුවේ object-fit ගුණාංගය සඳහා ප්‍රධාන අගයන් දක්වා ඇත:

අගයන්

උදාහරණය

අපගේ රූපය සඳහා නිශ්චිත ප්‍රමාණය පුරවන්නේ දර්ශන අනුපාත සුරැකීමෙන් තොරව සකසමු:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: fill;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

උදාහරණය

දැන් අපි රූපය නිශ්චිත කන්ටේනරය දර්ශන අනුපාත සුරක්ෂිත කරමින් පුරවන පරිදි කරමු:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: contain;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

උදාහරණය

රූපයේ ප්‍රමාණය වෙනස් වන නමුත් එහි දර්ශන අනුපාත සුරක්ෂිත වන පරිදි, අපගේ රූපයෙන් නිශ්චිත කන්ටේනරය පුරවමු:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: cover;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

උදාහරණය

අපගේ රූපයේ මුල් ප්‍රමාණය සුරක්ෂිත කරමින්, එය නිශ්චිත කන්ටේනරය තුළ තබමු:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: none;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

මෙයද බලන්න