نسبت
تولید شوي سیډو عناصر وکاروئ ترڅو یو عنصر ستاسو د انتخاب اړخ تناسب وساتي. د مور او پلار د عرض پراساس د ځواب ویونکي ویډیو یا سلایډ شو امبیډونو اداره کولو لپاره مناسب.
په اړه
د تناسب مرستندویه وکاروئ ترڅو د بهرني مینځپانګې اړخ تناسب اداره کړئ لکه <iframe>
s, <embed>
s, <video>
s, and <object>
s. دا مرستندویان په هر معیاري HTML ماشوم عنصر کې هم کارول کیدی شي (د مثال په توګه، a <div>
یا <img>
). سټایلونه د مور او پلار .ratio
ټولګي څخه مستقیم ماشوم ته پلي کیږي.
د اړخ تناسب په 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>
د اړخ نسبت
د اړخ تناسب د ترمیم کونکي ټولګیو سره تنظیم کیدی شي. په ډیفالټ ډول لاندې تناسب ټولګي چمتو شوي:
<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%)
);