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.

Sa pahinang ito

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

Pro-Tip! Hindi mo kailangan 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 .ratioat 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:

1x1

4x3

16x9

21x9

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

2x1

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

4x3, pagkatapos ay 2x1

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

Mapa ng Sass

Sa loob _variables.scssng , maaari mong baguhin ang mga aspect ratio na gusto mong gamitin. Narito ang aming default na $ratio-aspect-ratiosmapa. 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%)
);