Forhold

Brug genererede pseudo-elementer til at få et element til at bevare det billedformat, du vælger. Perfekt til responsiv håndtering af video- eller diasshow-indlejringer baseret på forælderens bredde.

På denne side

Om

Brug forholdshjælpen til at administrere billedformaterne for eksternt indhold som <iframe>s, <embed>s, <video>s og <object>s. Disse hjælpere kan også bruges på ethvert standard underordnet HTML-element (f.eks. a <div>eller <img>). Typografier anvendes fra forældreklassen .ratiodirekte til barnet.

Størrelsesforhold er deklareret i et Sass-kort og inkluderet i hver klasse via CSS-variabel, som også tillader brugerdefinerede billedformater .

Pro-tip! Du behøver ikke frameborder="0"på dine <iframe>s, da vi tilsidesætter det for dig i Genstart .

Eksempel

Indpak enhver indlejring, som en <iframe>, i et overordnet element med .ratioen klasse med formatforhold. Det umiddelbare underordnede element dimensioneres automatisk takket være vores universalvælger .ratio > *.

html

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

Størrelsesforhold

Aspektforhold kan tilpasses med modifikatorklasser. Som standard er følgende forholdsklasser angivet:

1x1

4x3

16x9

21x9

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>

Brugerdefinerede forhold

Hver .ratio-*klasse inkluderer en tilpasset CSS-egenskab (eller CSS-variabel) i vælgeren. Du kan tilsidesætte denne CSS-variabel for at skabe brugerdefinerede billedformater på farten med lidt hurtig matematik fra din side.

For at oprette et billedformat på 2x1 skal du indstille --bs-aspect-ratio: 50%på .ratio.

2x1

html

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

Denne CSS-variabel gør det nemt at ændre billedformatet på tværs af brudpunkter. Følgende er 4x3 til start, men ændres til en brugerdefineret 2x1 ved det mellemste brudpunkt.

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

4x3, derefter 2x1

html

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

Sass kort

Indenfor _variables.scsskan du ændre de billedformater, du vil bruge. Her er vores standardkort $ratio-aspect-ratios. Rediger kortet, som du vil, og kompilér dine Sass igen for at tage dem i brug.

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