Ratios
ھاسىل قىلىنغان ساختا ئېلېمېنتلارنى ئىشلىتىپ ، ئېلېمېنتنىڭ تاللاش نىسبىتىنى ساقلاپ قالىسىز. ئاتا-ئانىنىڭ كەڭلىكىگە ئاساسەن سىن ياكى تام تەسۋىر قىستۇرما ئىنكاسلارنى بىر تەرەپ قىلىشقا ماس كېلىدۇ.
ھەققىدە
نىسبەت ياردەمچىسىنى ئىشلىتىپ ، <iframe>
s ، <embed>
s ، <video>
s ۋە <object>
s غا ئوخشاش سىرتقى مەزمۇنلارنىڭ تەرەپ نىسبىتىنى باشقۇرۇڭ. بۇ ياردەمچىلەرنى ھەر قانداق ئۆلچەملىك HTML بالا ئېلېمېنتىدىمۇ ئىشلىتىشكە بولىدۇ (مەسىلەن ، a <div>
ياكى <img>
). ئۇسلۇب ئاتا-ئانىلار .ratio
سىنىپىدىن بالىغا بىۋاسىتە قوللىنىلىدۇ.
Aspect نىسبىتى 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>
Sass map
ئىچىدە _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%)
);