مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
in English

نسبت

هڪ عنصر ٺاهڻ لاءِ ٺاهيل pseudo عناصر استعمال ڪريو توهان جي پسند جي تناسب کي برقرار رکو. والدين جي چوٽي جي بنياد تي جوابي طور تي ويڊيو يا سلائڊ شو ايمبيڊس کي سنڀالڻ لاءِ مڪمل.

بابت

<iframe><embed><video>s، ۽ s وانگر خارجي مواد جي اسپيڪٽ ريٽس کي منظم ڪرڻ لاءِ تناسب مددگار استعمال ڪريو <object>. اهي مددگار پڻ استعمال ڪري سگھجن ٿيون ڪنهن به معياري HTML ٻار جي عنصر تي (مثال طور، a <div>يا <img>). انداز والدين .ratioطبقي کان سڌو سنئون ٻار تي لاڳو ٿين ٿا.

Aspect ratios هڪ Sass نقشي ۾ اعلان ڪيا ويا آهن ۽ CSS متغير ذريعي هر ڪلاس ۾ شامل ڪيا ويا آهن، جيڪو پڻ اجازت ڏئي ٿو حسب ضرورت تناسب .

پرو-ٽيپ! frameborder="0"توهان کي توهان جي ايس جي ضرورت نه <iframe>آهي جيئن اسان توهان جي لاء ريبوٽ ۾ اوور رائڊ ڪيو .

مثال

ڪنهن به ايمبيڊ کي لفاف ڪريو، جهڙوڪ هڪ <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>

پاسو تناسب

Aspect ratios modifier ڪلاسن سان ترتيب ڏئي سگھجن ٿا. ڊفالٽ طور هيٺ ڏنل تناسب ڪلاس مهيا ڪيا ويا آهن:

1x1
4x3
16x9
21x9
<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 متغير کي اڏامڻ تي حسب ضرورت تناسب ٺاھيو توھان جي حصي تي ڪجھ تيز رياضي سان.

مثال طور، 2x1 اسپيڪٽ ريشو ٺاهڻ لاءِ، تي سيٽ --bs-aspect-ratio: 50%ڪريو .ratio.

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