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.
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 .ratio
kelas induk langsung ke anak.
Rasio aspek dideklarasikan dalam peta Sass dan disertakan dalam setiap kelas melalui variabel CSS, yang juga memungkinkan rasio aspek khusus .
frameborder="0"
di
<iframe>
s Anda karena kami menimpanya untuk Anda di
Reboot .
Contoh
Bungkus semat apa pun, seperti <iframe>
, dalam elemen induk dengan .ratio
dan 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:
<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
.
<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
}
}
<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%)
);