تناسب
کسی عنصر کو اپنی پسند کے پہلو تناسب کو برقرار رکھنے کے لیے پیدا کردہ سیوڈو عناصر کا استعمال کریں۔ والدین کی چوڑائی کی بنیاد پر ویڈیو یا سلائیڈ شو ایمبیڈس کو جوابی طور پر ہینڈل کرنے کے لیے بہترین ہے۔
کے بارے میں
<iframe>
s، <embed>
s، <video>
s، اور s جیسے بیرونی مواد کے پہلوی تناسب کو منظم کرنے کے لیے تناسب مددگار کا استعمال کریں <object>
۔ یہ مددگار کسی بھی معیاری HTML چائلڈ عنصر (جیسے، a <div>
یا <img>
) پر بھی استعمال کیے جا سکتے ہیں۔ طرزیں والدین .ratio
کی کلاس سے براہ راست بچے پر لاگو ہوتی ہیں۔
پہلو کے تناسب کا اعلان Sass نقشے میں کیا جاتا ہے اور CSS متغیر کے ذریعے ہر کلاس میں شامل کیا جاتا ہے، جو حسب ضرورت پہلو تناسب کی بھی اجازت دیتا ہے ۔
frameborder="0"
آپ کو اپنے
<iframe>
s کی
ضرورت نہیں ہے
کیونکہ ہم اسے ریبوٹ میں آپ کے لیے اوور رائڈ کرتے ہیں ۔
مثال
کسی بھی ایمبیڈ کو لپیٹیں، جیسے کہ <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%)
);