Rasio

Gunakan elemen pseudo yang dihasilkan untuk membuat elemen mempertahankan rasio aspek yang Anda pilih. Sempurna untuk menangani video atau tayangan slide secara responsif berdasarkan lebar induknya.

Di halaman ini

Tentang

Gunakan pembantu rasio untuk mengelola rasio aspek konten eksternal seperti <iframe>s, <embed>s, <video>s, dan <object>s. Helper ini juga dapat digunakan pada elemen anak HTML standar (misalnya, a <div>atau <img>). Gaya diterapkan dari .ratiokelas induk langsung ke anak.

Rasio aspek dideklarasikan dalam peta Sass dan disertakan dalam setiap kelas melalui variabel CSS, yang juga memungkinkan rasio aspek khusus .

Tips Pro! Anda tidak perlu frameborder="0"di <iframe>s Anda karena kami menimpanya untuk Anda di Reboot .

Contoh

Bungkus semat apa pun, seperti <iframe>, dalam elemen induk dengan .ratiodan kelas rasio aspek. Elemen anak langsung secara otomatis berukuran berkat pemilih universal kami .ratio > *.

<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 dapat disesuaikan dengan kelas pengubah. Secara default, kelas rasio berikut disediakan:

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>

Rasio khusus

Setiap .ratio-*kelas menyertakan properti kustom CSS (atau variabel CSS) di pemilih. Anda dapat mengganti variabel CSS ini untuk membuat rasio aspek khusus dengan cepat dengan beberapa perhitungan cepat di pihak Anda.

Misalnya, untuk membuat rasio tinggi lebar 2x1, setel --bs-aspect-ratio: 50%di .ratio.

2x1

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

Variabel CSS ini memudahkan untuk memodifikasi rasio aspek di seluruh titik henti sementara. Berikut ini adalah 4x3 untuk memulai, tetapi berubah menjadi 2x1 khusus pada breakpoint sedang.

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

4x3, lalu 2x1

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

peta Sass

Di dalam _variables.scss, Anda dapat mengubah rasio aspek yang ingin Anda gunakan. Berikut peta default kami $ratio-aspect-ratios. Ubah peta sesuka Anda dan kompilasi ulang Sass Anda untuk digunakan.

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