CSS object-fit کا اعداد و شمار

CSS object-fit پرز کا اعداد و شمار، <img> یا <video> کی بڑائی کو کیسے کانٹینر کے مطابق بنانا ہے، بتانا ہے۔

براوزر کی مدد

جداول میں کچھ اعداد و شمار، اس کی پوری مدد سے اس کا پہلا براوزر کا ورژن درج کیا گیا ہے جس میں اس کا پوری مدد سے استعمال کیا جاسکتا ہے۔

پرز کروم آئی ای فائر فاکس سافری آپرا
object-fit 31.0 16.0 36.0 7.1 19.0

CSS object-fit کا اعداد و شمار

CSS object-fit استعمال کا مقصد، <img> یا <video> کی بڑائی کو کیسے کانٹینر کے مطابق بنانا ہے، بتانا ہے۔

یہ اعداد و شمار، مواد کو مختلف طریقوں سے کانٹینر پر پُر کرنے کا راستہ بتاتا ہے۔ مثلاً 'تناسب کثیریت برقرار رکھنا' یا 'کچھ سے زیادہ فضا پر کچھ سکتا ہے'۔

نیچے شانگهای فلاور پارک سے آئی آئی لیلی کا تصویر دیکھئے جائے، جو 300x300 پیکسلو کا ہے:

تولیپ

لیکن، اگر ہم اُس تصویر کو 200x300 پیکسلو میں رکھیجئے تو یہ ایسا نظر آئے گا:

تولیپ

مثال

img {
  width: 200px;
  height: 300px;
}

خود کا تجربہ کریں

آسانی سے دیکھئے جائے گا کہ تصویر کو 200x300 پیکسلو کے کانٹینر میں فت کیا گیا ہے، اور اصل تناسب کثیریت توخریب ہو چکی ہے۔

اگر ہم استعمال کریجئے، object-fit: cover;، جس سے تصویر کی جانب کی چھوٹی کیجئے گئی ہے، تناسب کثیریت برقرار رہ جائے گا، اور اس کو فضا پر پُر کیا جائے گا، جیسا کہ نیچے دیکھئے جائے:

کافی

مثال

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

خود کا تجربہ کریں

ایک دیگر مثال

یہاں، ہم دو تصاویر کا استعمال کریجئے، اور ہم چاہتے ہیں کہ وہ براوزر کا ونڈو کی 50 فیصد کی چوڑائی اور 100 فیصد کی بلندی پر پُر ہو جائیں۔

در مثال زیر، استعمال نہیں کریجئے، object-fit، اس لئے جب ہم براوزر کا ونڈو بڑھائیجئے یا چھوٹا کریجئے تو تصویر کا تناسب کثیریت توخریب ہو جائے گا:

مثال

خود کا تجربہ کریں

در مثال بعد، ہم استعمال کریجئے، object-fit: cover;، اس لئے جب ہم براوزر کا ونڈو بڑھائیجئے یا چھوٹا کریجئے تو تصویر کا تناسب کثیریت برقرار رہ جائے گا:

مثال

خود کا تجربہ کریں

CSS object-fit کی تمام اعداد و شمار

object-fit مزید طور پر، اس کا اعداد و شمار درج کیا گیا ہے:

  • fill - مول بند اعداد، تبدیل شدہ مواد کی بڑائی کو بڑھائیجئے تاکہ عناصر کا آئیکن کا داخلی کا جعبه پُر ہو جائے۔ اگر ضروری ہو تو اس آئیکن کو اس کی جگہ پر لگائیجئے تاکہ یہ مناسب ہو جائے۔
  • contain - تبدیل شدہ مواد کو اسپن کریجئے تاکہ اس کا تناسب کثیریت برقرار رہ سکے، اور اس کو عناصر کا آئیکن کا داخلی کا جعبه میں داخل کریجئے۔
  • cover - بڑی سے چھوٹی کیجئے، تاکہ پُر کئے جانے والے عناصر کا آئیکن کا تناسب کثیریت برقرار رہ سکے۔ اس آئیکن کو کیجئے تاکہ یہ مناسب ہو جائے۔
  • none - جائز کی بڑائی کو سخت نہیں کردیا گیا ہے。
  • scale-down - مطلب کی بڑائی کو سادے مطلب یا شامل مطلب کی طرح سے سخت کردیا گیا ہے (کوچھ خاص آئیٹم کی سخت بڑائی کو پیدا کردیا گیا ہے)

درج ذیل مثال object-fit کیتیجی کی تمام ممکنہ کا جیسی

مثال

fill {object-fit: fill;}
contain {object-fit: contain;}
cover {object-fit: cover;}
scale-down {object-fit: scale-down;}
none {object-fit: none;}

خود کا تجربہ کریں