in English

تناسب

کسی عنصر کو اپنی پسند کے پہلو تناسب کو برقرار رکھنے کے لیے پیدا کردہ سیوڈو عناصر کا استعمال کریں۔ والدین کی چوڑائی کی بنیاد پر ویڈیو یا سلائیڈ شو ایمبیڈس کو جوابی طور پر ہینڈل کرنے کے لیے بہترین ہے۔

اس صفحہ پر

کے بارے میں

<iframe>s، <embed>s، <video>s، اور s جیسے بیرونی مواد کے پہلوی تناسب کو منظم کرنے کے لیے تناسب مددگار کا استعمال کریں <object>۔ یہ مددگار کسی بھی معیاری HTML چائلڈ عنصر (جیسے، a <div>یا <img>) پر بھی استعمال کیے جا سکتے ہیں۔ طرزیں والدین .ratioکی کلاس سے براہ راست بچے پر لاگو ہوتی ہیں۔

پہلو کے تناسب کا اعلان Sass نقشے میں کیا جاتا ہے اور CSS متغیر کے ذریعے ہر کلاس میں شامل کیا جاتا ہے، جو حسب ضرورت پہلو تناسب کی بھی اجازت دیتا ہے ۔

پرو ٹپ! frameborder="0"آپ کو اپنے <iframe>s کی ضرورت نہیں ہے کیونکہ ہم اسے ریبوٹ میں آپ کے لیے اوور رائڈ کرتے ہیں ۔

مثال

کسی بھی ایمبیڈ کو لپیٹیں، جیسے کہ <iframe>، ایک بنیادی عنصر میں .ratioاور اسپیکٹ ریشو کلاس کے ساتھ۔ ہمارے یونیورسل سلیکٹر کی بدولت فوری چائلڈ عنصر خود بخود سائز میں آ جاتا ہے .ratio > *۔

html

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

پہلو کا تناسب

پہلو کے تناسب کو موڈیفائر کلاسز کے ساتھ اپنی مرضی کے مطابق کیا جا سکتا ہے۔ پہلے سے طے شدہ تناسب کی کلاسیں فراہم کی جاتی ہیں:

1x1

4x3

16x9

21x9

html

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

حسب ضرورت تناسب

ہر .ratio-*کلاس میں سلیکٹر میں ایک CSS کسٹم پراپرٹی (یا CSS متغیر) شامل ہوتا ہے۔ آپ اپنی طرف سے کچھ فوری ریاضی کے ساتھ پرواز پر حسب ضرورت پہلو تناسب بنانے کے لیے اس CSS متغیر کو اوور رائیڈ کر سکتے ہیں۔

مثال کے طور پر، 2x1 پہلو تناسب بنانے کے لیے، --bs-aspect-ratio: 50%پر سیٹ کریں .ratio۔

2x1

html

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

یہ CSS متغیر بریک پوائنٹس میں پہلو کے تناسب میں ترمیم کرنا آسان بناتا ہے۔ شروع کرنے کے لیے مندرجہ ذیل 4x3 ہے، لیکن درمیانے وقفے پر اپنی مرضی کے مطابق 2x1 میں تبدیل ہو جاتا ہے۔

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

4x3، پھر 2x1

html

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

ساس نقشہ

کے اندر _variables.scss، آپ ان پہلوؤں کے تناسب کو تبدیل کر سکتے ہیں جسے آپ استعمال کرنا چاہتے ہیں۔ ہمارا ڈیفالٹ $ratio-aspect-ratiosنقشہ یہ ہے۔ اپنی پسند کے مطابق نقشے میں ترمیم کریں اور اپنے ساس کو استعمال کرنے کے لیے دوبارہ مرتب کریں۔

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);