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.
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 .ratio
kalasi ya makolo molunjika kwa mwana.
Magawo amalengezedwa pamapu a Sass ndikuphatikizidwa mu kalasi iliyonse kudzera mumitundu yosiyanasiyana ya CSS, yomwe imalolanso mareyitidwe amitundu .
Chitsanzo
Manga choyika chilichonse, monga <iframe>
, mu chinthu cha makolo ndi .ratio
gulu 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:
<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
.
<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
}
}
<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-ratios
mapu 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%)
);