نسبت

بابت

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

Aspect ratios هڪ 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>

پاسو تناسب

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

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

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