in English

Di ratios dɛn

Yuz jenarayz pseudo elemɛnt fɔ mek wan ɛlimɛnt mentɛn di aspek rɛsɛshɔn we yu pik. Pafɛkt fɔ ansa di vidio ɔ slayd sho ɛmbad dɛn bay di wit we di mama ɔ papa gɛt.

Na dis pej

Bɔt

Yuz di ratio ɛlda fɔ manej di aspek ratio dɛn fɔ ɛksternal kɔntinyu lɛk <iframe>s, <embed>s, <video>s, ɛn <object>s. Dɛn ɛp dɛn ya kin yuz dɛn bak pan ɛni standad HTML pikin ɛlimɛnt (ɛgz., a <div>ɔ <img>). Dɛn kin yuz stayl dɛn frɔm di mama ɛn papa .ratioklas dairekt to di pikin.

Aspek rɛsɛshɔn dɛn de diklar insay wan Sass map ɛn inklud insay ɛni klas via CSS vɛriɔbul, we de alaw bak kɔstɔm aspek rɛsɛshɔn .

Pro-Tip fɔ di wan dɛn! Yu nɔ nid frameborder="0"pan yu <iframe>s as wi de ɔvalayz dat fɔ yu na Ribɔt .

Ɛgzampul

Rap ɛni ɛmbad, lɛk wan <iframe>, insay wan mama ɛn papa ɛlimɛnt wit .ratioɛn wan aspek rɛtɛshɔn klas. Di immediate child element de otomatik saiz tanks to wi yunivasal selekta .ratio > *.

html

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

Aspek rɛsɛshɔn dɛn

Aspek ratios kin kɔstɔmayz wit modifya klas dɛn. Bay difɔlt dɛn de gi di fɔs ratio klas dɛn:

1x1 we de sho

4x3 we de sho

16x9 we de sho

21x9 we de sho

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>

Kastom ratios dɛn

Ɛni .ratio-*klas gɛt wan CSS kɔstɔm prɔpati (ɔ CSS vɛriɔbul) na di sɛlɛktɔ. Yu kin ɔvalayz dis CSS vɛriɔbul fɔ mek kɔstɔm aspek rɛsɛshɔn dɛn na di flay wit sɔm kwik mats na yu pat.

Fɔ ɛgzampul, fɔ mek yu gɛt 2x1 aspek rɛtɛshɔn, sɛt --bs-aspect-ratio: 50%am na di .ratio.

2x1 we de sho

html

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

Dis CSS vɛriɔbul de mek am izi fɔ chenj di aspek rɛtɛshɔn akɔdin to brekpɔynt dɛn. Di wan dɛn we de dɔŋ ya na 4x3 fɔ stat, bɔt i chenj to kɔstɔm 2x1 na di midul brekpɔynt.

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

4x3, dɔn 2x1

html

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

Sass na map

Insay _variables.scss, yu kin chenj di aspek ratio dɛn we yu want fɔ yuz. Na dis na wi difɔlt $ratio-aspect-ratiosmap. Modify di map as yu laik en rekompile yu Sass fo put dem fo yus.

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