in English

Rationes

Utere pseudo elementis generatis ad faciendum elementum aspectum rationis tuae eligendo conservandum. Perfecta pro responsabili tractatione 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 > *.

html

<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

html

<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

html

<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

html

<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%)
);