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.
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 .ratio
kelas 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 .
frameborder="0"
on
<iframe>
s anjeun salaku urang override nu keur anjeun dina
Reboot .
Contona
Bungkus naon waé embed, sapertos <iframe>
, dina unsur indung .ratio
sareng kelas rasio aspék. Elemen anak langsung ukuranana sacara otomatis berkat pamilih universal urang .ratio > *
.
<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:
<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
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Variabel CSS ieu ngagampangkeun pikeun 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
}
}
<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-ratios
Ieu 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%)
);