Verhältnisser

Benotzt generéiert Pseudo Elementer fir datt en Element den Aspekt Verhältnis vun Ärer Wiel behalen. Perfekt fir reaktiounsfäeger Ëmgank mat Video oder Diashow Embeds baséiert op der Breet vum Elterendeel.

Op dëser Säit

Iwwer

Benotzt de Verhältnishëllefer fir d'Aspektverhältnisser vum externen Inhalt wéi <iframe>s, <embed>s, <video>s an <object>s ze managen. Dës Helfer kënnen och op all Standard HTML Kannerelement benotzt ginn (zB a <div>oder <img>). Stiler ginn aus der Elterenklass .ratiodirekt op d'Kand applizéiert.

Aspektverhältnisser ginn an enger Sass Kaart deklaréiert an an all Klass iwwer CSS Variabel abegraff, wat och personaliséiert Aspektverhältnisser erlaabt .

Pro-Tipp! Dir braucht net frameborder="0"op Är <iframe>s wéi mir dat fir Iech am Restart iwwerdribblen .

Beispill

Wrap all embed, wéi en <iframe>, an engem Elterendeel Element mat .ratioan engem Aspekt Verhältnis Klass. Dat direkt Kannerelement gëtt automatesch mat eisem universellen Selektor ugepasst .ratio > *.

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

Aspekt Verhältnisser

Aspektverhältnisser kënne mat Modifizéierungsklassen personaliséiert ginn. Par défaut ginn déi folgend Verhältnisklassen ugebueden:

1 x1

4x3 vun

16 x9p

21 x9p

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

Benotzerdefinéiert Verhältnisser

All .ratio-*Klass enthält eng CSS Custom Property (oder CSS Variabel) am Selector. Dir kënnt dës CSS Variabel iwwerschreiden fir personaliséiert Aspektverhältnisser op der Flucht mat e puer schnelle Mathematik vun Ärem Deel ze kreéieren.

Zum Beispill, fir en 2x1 Aspekt Verhältnis ze kreéieren, setzt --bs-aspect-ratio: 50%op der .ratio.

2x1 vun

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

Dës CSS Variabel mécht et einfach den Aspekt Verhältnis iwwer Breakpunkter z'änneren. Déi folgend ass 4x3 fir unzefänken, awer ännert sech op e personaliséierten 2x1 um mëttleren Breakpunkt.

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

4x3, dann 2x1

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

Sass map

Bannen _variables.scss, kënnt Dir d'Aspektverhältnisser änneren, déi Dir benotze wëllt. Hei ass eis Standardkaart $ratio-aspect-ratios. Ännert d'Kaart wéi Dir wëllt a kompiléiert Är Sass nei fir se ze benotzen.

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