Verhältnisse

Verwenden Sie generierte Pseudoelemente, damit ein Element das von Ihnen gewählte Seitenverhältnis beibehält. Perfekt für die reaktionsschnelle Handhabung von Video- oder Diashow-Einbettungen basierend auf der Breite des übergeordneten Elements.

Auf dieser Seite

Um

Verwenden Sie den Verhältnishelfer, um die Seitenverhältnisse externer Inhalte wie <iframe>s, <embed>s, <video>s und <object>s zu verwalten. Diese Helfer können auch für jedes standardmäßige untergeordnete HTML-Element (z. B. a <div>oder <img>) verwendet werden. Stile werden von der übergeordneten .ratioKlasse direkt auf die untergeordnete Klasse angewendet.

Seitenverhältnisse werden in einer Sass-Map deklariert und per CSS-Variable in jede Klasse eingebunden, was auch benutzerdefinierte Seitenverhältnisse zulässt .

Pro-Tipp! Sie brauchen frameborder="0"Ihre <iframe>s nicht, da wir dies in Reboot für Sie überschreiben .

Beispiel

Wickeln Sie jede Einbettung, wie z. B. eine <iframe>, in ein übergeordnetes Element mit .ratioeiner Seitenverhältnisklasse ein. Die Größe des unmittelbar untergeordneten Elements wird dank unseres universellen Selektors automatisch angepasst .ratio > *.

html

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

Seitenverhältnisse

Seitenverhältnisse können mit Modifikatorklassen angepasst werden. Standardmäßig werden die folgenden Verhältnisklassen bereitgestellt:

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>

Benutzerdefinierte Verhältnisse

Jede .ratio-*Klasse enthält eine benutzerdefinierte CSS-Eigenschaft (oder CSS-Variable) im Selektor. Sie können diese CSS-Variable überschreiben, um benutzerdefinierte Seitenverhältnisse im Handumdrehen mit etwas schneller Mathematik Ihrerseits zu erstellen.

Um beispielsweise ein Seitenverhältnis von 2x1 zu erstellen, stellen Sie --bs-aspect-ratio: 50%auf .ratio.

2x1

html

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

Diese CSS-Variable erleichtert das Ändern des Seitenverhältnisses über Haltepunkte hinweg. Das Folgende ist 4x3 zu Beginn, ändert sich aber am mittleren Haltepunkt zu einem benutzerdefinierten 2x1.

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

4x3, dann 2x1

html

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

Sass-Karte

In _variables.scsskönnen Sie die Seitenverhältnisse ändern, die Sie verwenden möchten. Hier ist unsere Standardkarte $ratio-aspect-ratios. Ändern Sie die Karte nach Belieben und kompilieren Sie Ihre Sass neu, um sie zu verwenden.

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