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.
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 .ratio
Klasse 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 .
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 .ratio
einer Seitenverhältnisklasse ein. Die Größe des unmittelbar untergeordneten Elements wird dank unseres universellen Selektors automatisch angepasst .ratio > *
.
<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:
<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
.
<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
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass-Karte
In _variables.scss
kö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%)
);