Mga ratios

Gamita ang namugna nga pseudo nga mga elemento aron mapadayon ang usa ka elemento sa aspect ratio nga imong gipili. Hingpit alang sa responsively pagdumala sa video o slideshow embeds base sa gilapdon sa ginikanan.

Niini nga panid

Mahitungod sa

Gamita ang ratio helper aron madumala ang aspect ratios sa external content sama <iframe>sa s, <embed>s, <video>s, ug <object>s. Kini nga mga katabang mahimo usab nga magamit sa bisan unsang sukaranan nga elemento sa bata nga HTML (pananglitan, usa <div>o <img>). Ang mga estilo gipadapat gikan sa .ratioklase sa ginikanan direkta ngadto sa bata.

Ang mga aspect ratio gideklarar sa usa ka Sass map ug gilakip sa matag klase pinaagi sa CSS variable, nga nagtugot usab sa custom aspect ratios .

Pro-Tip! Dili nimo kinahanglan frameborder="0"sa imong <iframe>s ingon nga among gi-override kana alang kanimo sa Reboot .

Pananglitan

I-wrap ang bisan unsang embed, sama sa <iframe>, sa usa ka elemento sa ginikanan nga adunay .ratioug usa ka klase sa aspect ratio. Ang diha-diha nga elemento sa bata awtomatik nga gisukod salamat sa among 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>

Aspect ratios

Ang mga ratios sa aspeto mahimong ipasibo sa mga klase sa modifier. Sa kasagaran ang mosunod nga mga klase sa ratio gihatag:

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>

Pasadya nga mga ratios

Ang matag .ratio-*klase naglakip sa CSS custom property (o CSS variable) sa selector. Mahimo nimong i-override kini nga variable sa CSS aron makahimo og mga custom nga aspect ratio sa langaw nga adunay pipila ka dali nga matematika sa imong bahin.

Pananglitan, aron makahimo og 2x1 aspect ratio, ibutang --bs-aspect-ratio: 50%sa .ratio.

2x1

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

Kini nga CSS variable nagpasayon sa pag-usab sa aspect ratio sa mga breakpoints. Ang mosunud mao ang 4x3 aron magsugod, apan nagbag-o sa usa ka naandan nga 2x1 sa medium nga breakpoint.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

4x3, unya 2x1

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

Sass mapa

Sulod sa _variables.scss, mahimo nimong usbon ang mga aspect ratio nga gusto nimong gamiton. Ania ang among default $ratio-aspect-ratiosnga mapa. Usba ang mapa kung gusto nimo ug i-compile ang imong Sass aron magamit kini.

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