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.

Sur ĉi tiu paĝo

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 .ratioklaso rekte al la infano.

Bildformatoj estas deklaritaj en Sass-mapo kaj inkluditaj en ĉiu klaso per CSS-variablo, kiu ankaŭ permesas kutimajn bildformatojn .

Por-Konsileto! Vi ne bezonas frameborder="0"vian <iframe>s ĉar ni anstataŭas tion por vi en Reboot .

Ekzemplo

Envolvu ajnan enigon, kiel <iframe>, en gepatra elemento kun .ratiokaj 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:

1x1

4x3

16x9

21x9

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

2x1

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

4x3, tiam 2x1

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

Sass-mapo

Ene _variables.scssde , vi povas ŝanĝi la proporciojn, kiujn vi volas uzi. Jen nia defaŭlta $ratio-aspect-ratiosmapo. 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%)
);