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

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 chosankha chathu chapadziko lonse lapansi .ratio > *.

html

<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

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>

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

html

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

Kusintha kwa CSS uku kumapangitsa kuti zikhale zosavuta kusintha chiwongolero cha ma breakpoints. Zotsatirazi ndi 4x3 kuti ziyambe, koma zimasintha kukhala 2x1 pakatikati.

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

4x3, ndi 2x1

html

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