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.

Pada halaman ini

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 .ratiokelas 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 .

Petua Pro! Anda tidak perlu 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 .ratiodan kelas nisbah bidang. Elemen anak serta-merta bersaiz secara automatik terima kasih kepada pemilih universal kami .ratio > *.

html

<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:

1x1

4x3

16x9

21x9

html

<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.

2x1

html

<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
  }
}

4x3, kemudian 2x1

html

<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-ratiospeta 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%)
);