Nisbah
Gunakan elemen pseudo yang dijana untuk membuat elemen mengekalkan nisbah bidang pilihan anda. Sesuai untuk mengendalikan video atau tayangan slaid secara responsif berdasarkan lebar induk.
Tentang
Gunakan pembantu nisbah untuk mengurus nisbah bidang kandungan luaran seperti <iframe>
s, <embed>
s, <video>
s dan <object>
s. Pembantu ini juga boleh digunakan pada mana-mana elemen anak HTML standard (cth, a <div>
atau <img>
). Gaya digunakan daripada .ratio
kelas induk terus kepada kanak-kanak.
Nisbah aspek diisytiharkan dalam peta Sass dan disertakan dalam setiap kelas melalui pembolehubah CSS, yang turut membenarkan nisbah bidang tersuai .
frameborder="0"
menggunakan telefon anda
<iframe>
kerana kami menggantikannya untuk anda dalam
But semula .
Contoh
Balut mana-mana benaman, seperti <iframe>
, dalam elemen induk dengan .ratio
dan kelas nisbah bidang. Elemen anak serta-merta bersaiz secara automatik terima kasih kepada 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>
Nisbah aspek
Nisbah aspek boleh disesuaikan dengan kelas pengubah suai. Secara lalai kelas nisbah 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>
Nisbah tersuai
Setiap .ratio-*
kelas termasuk sifat tersuai CSS (atau pembolehubah CSS) dalam pemilih. Anda boleh mengatasi pembolehubah CSS ini untuk mencipta nisbah aspek tersuai dengan cepat dengan beberapa matematik pantas di pihak anda.
Contohnya, untuk mencipta nisbah bidang 2x1, tetapkan --bs-aspect-ratio: 50%
pada .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Pembolehubah CSS ini memudahkan untuk mengubah suai nisbah bidang merentas titik putus. Berikut ialah 4x3 untuk dimulakan, tetapi berubah kepada 2x1 tersuai pada titik putus sederhana.
.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
Dalam _variables.scss
, anda boleh menukar nisbah bidang yang anda mahu gunakan. Inilah $ratio-aspect-ratios
peta lalai kami. Ubah suai peta mengikut kehendak anda dan susun semula Sass anda untuk menggunakannya.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);