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.
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 .ratio
langsung menyang bocah.
Rasio aspek diumumake ing peta Sass lan kalebu ing saben kelas liwat variabel CSS, sing uga ngidini rasio aspek khusus .
frameborder="0"
ing
<iframe>
s minangka kita override sing kanggo sampeyan ing
Urip maneh .
Tuladha
Bungkus sembarang embed, kaya <iframe>
, ing unsur induk karo .ratio
lan kelas rasio aspek. Elemen anak langsung ukuran kanthi otomatis amarga pamilih universal .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 bisa disesuaikan karo kelas modifier. Secara default, kelas rasio ing ngisor iki diwenehake:
<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
.
<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
}
}
<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-ratios
Punika 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%)
);