Nkyekyɛm ahorow

Fa generated pseudo elements di dwuma na ama element bi akura afã ratio a wopaw no mu. Ɛyɛ pɛpɛɛpɛ ma mmuae a wode bedi video anaa slideshow embeds a egyina ɔwofo no trɛw so ho dwuma.

Wɔ kratafa yi so

Fa ho

Fa ratio boafo no di dwuma fa hwɛ afã ratio ahorow a ɛwɔ akyi nsɛm te sɛ <iframe>s, <embed>s, <video>s, ne <object>s no so. Saa aboafoɔ yi nso wobetumi de adi dwuma wɔ HTML abofra element biara a ɛyɛ gyinapɛn so (sɛ nhwɛso no, a <div>anaa <img>). Wɔde style ahorow di dwuma fi ɔwofo .ratioadesuakuw no mu tẽẽ kɔ abofra no so.

Wɔbɔ afã nsusuwii ho dawuru wɔ Sass asase mfonini mu na wɔde ka adesua biara ho denam CSS nsakrae so, a ɛno nso ma kwan ma afã nsusuwii a wɔahyɛ da ayɛ .

Pro-Afotusɛm! Wo nhia frameborder="0"wɔ wo <iframe>s so sɛnea yɛ override saa ma wo wɔ Reboot .

Nhwɛsoɔ

Wrap embed biara, te sɛ <iframe>, wɔ ɔwofo element a .ratione aspect ratio class. Ntɛm ara abofra element no yɛ automatically sized aseda yɛn amansan selector .ratio > *.

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

Afã horow a wɔde di dwuma

Wobetumi de modifier adesua ahorow ayɛ afã nsusuwii ahorow no sɛnea wɔpɛ. Sɛnea wɔahyɛ no, wɔde ratio adesua ahorow a edidi so yi ama:

1x1 na ɛwɔ hɔ

4x3 na ɛwɔ hɔ

16x9 na ɛyɛ

21x9 na ɛyɛ

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

Amanneɛ kwan so nsusuwii ahorow

Klas biara .ratio-*de CSS amanneɛbɔ agyapade (anaasɛ CSS nsakrae) ka ho wɔ pawfo no mu. Wubetumi abɔ saa CSS nsakrae yi so de ayɛ custom aspect ratios wɔ fly no so a akontaabu bi a ɛyɛ ntɛm wɔ wo fam.

Sɛ nhwɛso no, sɛ wopɛ sɛ wobɔ 2x1 afã nsusuwii a, fa --bs-aspect-ratio: 50%si .ratio.

2x1 na ɛwɔ hɔ

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

Saa CSS nsakraeɛ yi ma ɛyɛ mmerɛ sɛ wobɛsesa afã ratio no wɔ breakpoints nyinaa so. Nea edidi so yi yɛ 4x3 sɛ wubefi ase, nanso ɛsakra kɔ amanne 2x1 so wɔ mfinimfini breakpoint no so.

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

4x3, afei 2x1

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

Sass asase mfonini

Wɔ _variables.scss, mu no, wubetumi asesa afã horow a wopɛ sɛ wode di dwuma no. Yɛn $ratio-aspect-ratiosmap a yɛde ahyɛ hɔ no ni. Sesa map no sɛnea wopɛ na san boaboa wo Sass no ano ma wɔde di dwuma.

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