Oke

Jiri pseudo ọcha emepụtara ka mmewere jikwaa oke akụkụ nke nhọrọ gị. Zuru oke maka ijikwa vidiyo ma ọ bụ ihe ngosi mmịfe dabere na obosara nne na nna.

Na ibe a

Ihe gbasara

Jiri ihe inyeaka iji jikwaa akụkụ nke ọdịnaya mpụga dị ka <iframe>s, <embed>s, <video>s, na <object>s. Enwere ike iji ndị enyemaka ndị a na mmemme ụmụaka HTML ọ bụla (dịka ọmụmaatụ, a <div>ma ọ bụ <img>). A na-etinye ụdị ejiji site na .ratioklaasị nne na nna ozugbo nye nwa ahụ.

A na-ekwupụta oke akụkụ na maapụ Sass ma tinye ya na klaasị ọ bụla site na mgbanwe CSS, nke na-enye ohere nha akụkụ omenala .

Pro-ndụmọdụ! Ịchọghị na s frameborder="0"gị <iframe>ka anyị na-ewepụ ya maka gị na Reboot .

Ọmụmaatụ

Kechie ihe ọ bụla agbakwunyere, dị ka ihe <iframe>, na mmewere nne na nna yana .ratioyana klaasị oke. A na-eme nha nwa ozugbo maka onye nhọpụta ụwa anyị .ratio > *.

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Akụkụ akụkụ

Enwere ike ịhazi oke akụkụ site na iji klas mgbanwe. Site na ndabara, a na-enye klaasị oke ndị a:

1 x1

4 x3

16 x9

21 x9

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

Oke omenala

Klas ọ bụla .ratio-*gụnyere ihe onwunwe omenala CSS (ma ọ bụ mgbanwe CSS) na onye nhọpụta. Ị nwere ike ịkagbu mgbanwe CSS a iji mepụta oke n'ụdị omenala na iji ụfọdụ mgbakọ na mwepụ ngwa ngwa n'akụkụ gị.

Dịka ọmụmaatụ, iji mepụta oke akụkụ 2x1, tọọ --bs-aspect-ratio: 50%na .ratio.

2 x1

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

Ngbanwe CSS a na-eme ka ọ dị mfe ịgbanwe akụkụ akụkụ n'ofe ebe nkwụsịtụ. Ihe na-esonụ bụ 4x3 ịmalite, mana ọ na-agbanwe na omenala 2x1 na ebe nkwụsị ọkara.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

4x3, wee 2x1

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

Map Sass

N'ime _variables.scss, ị nwere ike ịgbanwe akụkụ nke ịchọrọ iji. $ratio-aspect-ratiosNke a bụ maapụ ndabara anyị . Megharịa maapụ ahụ ka ọ masịrị gị wee chịkọta Sass gị ka itinye ya n'ọrụ.

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);