نسبت

په اړه

د تناسب مرستندویه وکاروئ ترڅو د بهرني مینځپانګې اړخ تناسب اداره کړئ لکه <iframe>s, <embed>s, <video>s, and <object>s. دا مرستندویان په هر معیاري 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نقشه ده. نقشه بدله کړئ لکه څنګه چې تاسو غواړئ او خپل Sass بیا تنظیم کړئ ترڅو د کارولو لپاره یې وساتئ.

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