Mawerengero

Gwiritsani ntchito zinthu zongopeka kuti mupange chinthucho kukhala ndi gawo lomwe mwasankha. Wangwiro pomvera akuchitira kanema kapena chiwonetsero chazithunzi embeds zochokera m'lifupi mwa kholo.

Patsamba ili

Za

Gwiritsani ntchito chiŵerengero chothandizira kuti muyang'anire magawo azinthu zakunja monga <iframe>s, <embed>s, <video>s, ndi <object>s. Othandizira awa atha kugwiritsidwanso ntchito pa chinthu chilichonse chokhazikika cha HTML (mwachitsanzo, a <div>kapena <img>). Masitayelo amaikidwa kuchokera ku .ratiokalasi ya makolo molunjika kwa mwana.

Magawo amalengezedwa pamapu a Sass ndikuphatikizidwa mu kalasi iliyonse kudzera mumitundu yosiyanasiyana ya CSS, yomwe imalolanso mareyitidwe amitundu .

Pro-Tip! Simufunikanso frameborder="0"pazanu <iframe>monga tikukulemberani mu Reboot .

Chitsanzo

Manga choyika chilichonse, monga <iframe>, mu chinthu cha makolo ndi .ratiogulu lachigawo. Chigawo chamwana chomwe chilipo nthawi yomweyo chimakhala chachikulu chifukwa cha kusankha kwathu konsekonse .ratio > *.

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

Magawo osiyanasiyana

Magawo amagawo amatha kusinthidwa ndi makalasi osintha. Mwachikhazikitso makalasi otsatirawa amaperekedwa:

1x1 pa

4x3 pa

16x9 pa

21x9 pa

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

Custom ma ratios

Kalasi iliyonse .ratio-*imaphatikizapo katundu wa CSS (kapena CSS variable) mu chosankha. Mutha kupitilira kusinthika kwa CSS kuti mupange mawonekedwe amtundu wanu pa ntchentche ndi masamu ofulumira kumbali yanu.

Mwachitsanzo, kuti mupange chiŵerengero cha 2x1, khalani --bs-aspect-ratio: 50%pa .ratio.

2x1 pa

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

Kusintha kwa CSS uku kumapangitsa kuti zikhale zosavuta kusintha chiŵerengero cha magawo pa breakpoints. Zotsatirazi ndi 4x3 kuyamba, koma kusintha kwa 2x1 mwambo pa sing'anga breakpoint.

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

4x3, ndi 2x1

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

Sass map

Mkati mwake _variables.scss, mutha kusintha magawo omwe mukufuna kugwiritsa ntchito. Nawa $ratio-aspect-ratiosmapu athu osakhazikika. Sinthani mapu momwe mukufunira ndikuphatikizanso Sass yanu kuti muwagwiritse ntchito.

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