Rationes

Pseudo elementis generatis utere ut elementum adspectum rationis tuae eligendo teneas. Perfecta responsionis tractatio video vel slideshow embedsibus subnixa latitudine parentis.

In hac pagina

De

Ratio adiutoris utere ut rationes contentorum externorum administrandi rationes <iframe>s, <embed>s, <video>s, <object>s. Hi adiutores etiam in quavis norma HTML infantis elementi (eg, a <div>vel <img>) adhiberi possunt. Styli applicantur a genere parentis .ratiodirecte ad puerum.

Aspectus rationes in tabula Sass declarantur et in unoquoque genere per CSS variabiles comprehenduntur, quae etiam rationes consuetudinis admittit .

Pro-Tip! Non opus frameborder="0"est tibi in tua <iframe>sicut nos delendi quod tibi in Reboot .

Exemplum

Involve quodvis embed , sicut <iframe>elementum , in parentis elementum cum .ratioratione et ratione ordinis . Puer immediatus elementum ipso facto nostro electori universali amplitudo est .ratio > *.

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Rationes aspectum

Rationes aspectum esse possunt cum classibus modifier nativus. Per defaltam hanc rationem genera praebentur:

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>

Consuetudo rationibus

Singula .ratio-*classis includit proprietatem CSS consuetudinis (vel CSS variabilis) in electore. Hanc CSS variabilem vincire potes ut aspectum consuetudinis rationes in musca cum aliqua parte tua celeri math.

Exempli gratia, rationem creare aspectum 2x1, pone --bs-aspect-ratio: 50%in .ratio.

2x1

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

Haec variabilis CSS efficit ut facilem rationem aspectum per abruptiones mutaret. Sequens est 4x3 incipere, sed mutat ad consuetudinem 2x1 in medio breakpoint.

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

4x3, deinde 2x1

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

Sass map

Intus _variables.scss, rationem mutare vis uti velis. Hic $ratio-aspect-ratiostabula nostra defalta est. Mutare mappam sicut voles et Sass compone ut ea utaris.

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