تناسب

کے بارے میں

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

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

مثال

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

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

پہلو کا تناسب

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

<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۔

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

<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%)
);