Rasio

Gunakake unsur pseudo sing digawe kanggo nggawe unsur njaga rasio aspek sing sampeyan pilih. Sampurna kanggo responsif nangani video utawa slideshow embeds adhedhasar jembaré wong tuwa.

Ing kaca iki

Babagan

Gunakake helper rasio kanggo ngatur rasio aspek isi eksternal kaya <iframe>s, <embed>s, <video>s, lan <object>s. Pembantu iki uga bisa digunakake ing sembarang unsur HTML standar (contone, <div>utawa <img>). Gaya ditrapake saka kelas induk .ratiolangsung menyang bocah.

Rasio aspek diumumake ing peta Sass lan kalebu ing saben kelas liwat variabel CSS, sing uga ngidini rasio aspek khusus .

Pro-Tip! Sampeyan ora perlu frameborder="0"ing <iframe>s minangka kita override sing kanggo sampeyan ing Urip maneh .

Tuladha

Bungkus sembarang embed, kaya <iframe>, ing unsur induk karo .ratiolan kelas rasio aspek. Elemen anak langsung ukuran kanthi otomatis amarga pamilih universal .ratio > *.

html

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

Rasio aspek

Rasio aspek bisa disesuaikan karo kelas modifier. Secara default, kelas rasio ing ngisor iki diwenehake:

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>

Rasio khusus

Saben .ratio-*kelas kalebu properti khusus CSS (utawa variabel CSS) ing pamilih. Sampeyan bisa ngilangi variabel CSS iki kanggo nggawe rasio aspek khusus kanthi cepet kanthi sawetara matematika cepet.

Contone, kanggo nggawe rasio aspek 2x1, setel --bs-aspect-ratio: 50%ing .ratio.

2x1

html

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

Variabel CSS iki nggampangake kanggo ngowahi rasio aspek antarane breakpoints. Ing ngisor iki 4x3 kanggo miwiti, nanging owah-owahan menyang 2x1 adat ing breakpoint medium.

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

4x3, banjur 2x1

html

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

Peta Sass

Ing _variables.scss, sampeyan bisa ngganti rasio aspek sing pengin digunakake. $ratio-aspect-ratiosPunika peta standar kita . Owahi peta sing dikarepake lan ngumpulake maneh Sass sampeyan supaya bisa digunakake.

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