Babandingan

Anggo elemen pseudo anu dibangkitkeun pikeun ngajantenkeun unsur ngajaga rasio aspek anu anjeun pilih. Sampurna pikeun responsively nanganan video atawa pintonan slaid embeds dumasar kana rubak indungna.

Dina kaca ieu

Ngeunaan

Anggo pembantu rasio pikeun ngatur rasio aspek eusi éksternal sapertos <iframe>s, <embed>s, <video>s, sareng <object>s. Helpers ieu ogé bisa dipaké dina sagala elemen HTML anak baku (misalna, <div>atawa <img>). Gaya diterapkeun ti .ratiokelas indungna langsung ka budak.

Rasio aspék dinyatakeun dina peta Sass sareng kalebet dina unggal kelas ngalangkungan variabel CSS, anu ogé ngamungkinkeun rasio aspék khusus .

Pro-Tip! Anjeun teu kedah frameborder="0"on <iframe>s anjeun salaku urang override nu keur anjeun dina Reboot .

Contona

Bungkus naon waé embed, sapertos <iframe>, dina unsur indung .ratiosareng kelas rasio aspék. Elemen anak langsung ukuranana sacara otomatis berkat pamilih universal urang .ratio > *.

html

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

Babandingan aspék

Rasio aspék tiasa disaluyukeun sareng kelas modifier. Sacara standar, kelas rasio ieu disayogikeun:

1x1

4x3

16x9

21 x9

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>

Babandingan custom

Unggal .ratio-*kelas ngawengku sipat custom CSS (atawa variabel CSS) dina pamilih nu. Anjeun tiasa override variabel CSS ieu nyieun babandingan aspék custom on laleur kalawan sababaraha math rusuh on bagian anjeun.

Contona, pikeun nyieun rasio aspék 2x1, setel --bs-aspect-ratio: 50%dina .ratio.

2x1

html

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

Variabel CSS ieu ngagampangkeun ngarobih rasio aspék dina titik-titik putus. Di handap ieu 4x3 dimimitian, tapi robah jadi 2x1 custom di breakpoint sedeng.

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

4x3, lajeng 2x1

html

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

Peta Sass

Dina _variables.scss, Anjeun bisa ngarobah rasio aspék nu Anjeun hoyong pake. $ratio-aspect-ratiosIeu peta standar urang . Robah peta sakumaha anu anjeun pikahoyong sareng kompilasi deui Sass anjeun pikeun dianggo.

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