Proporcioj
Uzu generitajn pseŭdo-elementojn por ke elemento konservi la proporcion de via elekto. Perfekta por respondeme pritrakti filmetojn aŭ bildarojn surbaze de la larĝo de la gepatro.
Pri
Uzu la rilatumon por administri la proporciojn de ekstera enhavo kiel <iframe>
s, <embed>
s, <video>
s, kaj <object>
s. Ĉi tiuj helpantoj ankaŭ povas esti uzataj sur iu ajn norma HTML-infana elemento (ekz., a <div>
aŭ <img>
). Stiloj estas aplikataj de la gepatra .ratio
klaso rekte al la infano.
Bildformatoj estas deklaritaj en Sass-mapo kaj inkluditaj en ĉiu klaso per CSS-variablo, kiu ankaŭ permesas kutimajn bildformatojn .
frameborder="0"
vian
<iframe>
s ĉar ni anstataŭas tion por vi en
Reboot .
Ekzemplo
Envolvu ajnan enigon, kiel <iframe>
, en gepatra elemento kun .ratio
kaj bildforma klaso. La tuja infana elemento estas aŭtomate grandigita danke al nia universala elektilo .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Bildformatoj
Bildformatoj povas esti personecigitaj per modifklasoj. Defaŭlte la sekvaj proporciaj klasoj estas provizitaj:
<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>
Propraj proporcioj
Ĉiu .ratio-*
klaso inkluzivas CSS kutiman posedaĵon (aŭ CSS-variablon) en la elektilo. Vi povas superregi ĉi tiun CSS-variablon por krei kutimajn bildformatojn sur la flugo kun iom da rapida matematiko viaflanke.
Ekzemple, por krei 2x1 bildformaton, agordu --bs-aspect-ratio: 50%
sur la .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Ĉi tiu CSS-variablo faciligas modifi la bildformaton trans rompopunktoj. La sekvanta estas 4x3 por komenci, sed ŝanĝiĝas al kutima 2x1 ĉe la meza rompopunkto.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass-mapo
Ene _variables.scss
de , vi povas ŝanĝi la proporciojn, kiujn vi volas uzi. Jen nia defaŭlta $ratio-aspect-ratios
mapo. Modifi la mapon laŭplaĉe kaj rekompilu vian Sass por uzi ilin.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);