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.
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 .ratio
direkt 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 .
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 .ratio
an 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:
<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
.
<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
}
}
<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%)
);