Mga ratio
Gumamit ng mga nabuong pseudo na elemento upang mapapanatili ng isang elemento ang aspect ratio na iyong pinili. Perpekto para sa tumutugon sa paghawak ng mga video o slideshow na naka-embed batay sa lapad ng magulang.
Tungkol sa
Gamitin ang ratio helper upang pamahalaan ang mga aspect ratio ng panlabas na nilalaman tulad ng <iframe>
s, <embed>
s, <video>
s, at <object>
s. Ang mga katulong na ito ay maaari ding gamitin sa anumang karaniwang HTML na elemento ng bata (hal., a <div>
o <img>
). Inilapat ang mga istilo mula sa .ratio
klase ng magulang nang direkta sa bata.
Idineklara ang mga aspect ratio sa isang Sass map at kasama sa bawat klase sa pamamagitan ng CSS variable, na nagbibigay-daan din sa mga custom na aspect ratio .
frameborder="0"
sa iyong
<iframe>
s dahil na-override namin iyon para sa iyo sa
Reboot .
Halimbawa
I-wrap ang anumang embed, tulad ng isang <iframe>
, sa isang parent na elemento na may .ratio
at isang klase ng aspect ratio. Awtomatikong nasusukat ang elemento ng agarang bata salamat sa aming universal selector .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Mga aspect ratio
Maaaring i-customize ang mga aspect ratio sa mga klase ng modifier. Bilang default, ibinibigay ang mga sumusunod na klase ng ratio:
<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>
Mga custom na ratio
Ang bawat .ratio-*
klase ay may kasamang CSS custom na property (o CSS variable) sa selector. Maaari mong i-override ang CSS variable na ito upang lumikha ng mga custom na aspect ratio sa mabilisang gamit ang ilang mabilis na matematika sa iyong bahagi.
Halimbawa, para gumawa ng 2x1 aspect ratio, itakda --bs-aspect-ratio: 50%
sa .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Pinapadali ng CSS variable na ito na baguhin ang aspect ratio sa mga breakpoint. Ang sumusunod ay 4x3 upang magsimula, ngunit nagbabago sa isang custom na 2x1 sa katamtamang breakpoint.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Mapa ng Sass
Sa loob _variables.scss
ng , maaari mong baguhin ang mga aspect ratio na gusto mong gamitin. Narito ang aming default na $ratio-aspect-ratios
mapa. Baguhin ang mapa ayon sa gusto mo at i-compile muli ang iyong Sass para magamit ang mga ito.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);