Rapò
Sèvi ak eleman pseudo pwodwi pou fè yon eleman kenbe rapò aspè ou chwazi a. Pafè pou reponn ak repons manyen videyo oswa diaporama embeds ki baze sou lajè a nan paran an.
Konsènan
Sèvi ak èd rapò a pou jere rapò aspè nan kontni ekstèn tankou <iframe>
s, <embed>
s, <video>
s, ak <object>
s. Èd sa yo ka itilize tou sou nenpòt eleman HTML estanda (pa egzanp, a <div>
oswa <img>
). Styles yo aplike nan klas paran .ratio
an dirèkteman nan timoun nan.
Rapò aspè yo deklare nan yon kat Sass epi yo enkli nan chak klas atravè CSS varyab, ki pèmèt tou rapò aspè koutim .
Egzanp
Anvlope nenpòt ki embed, tankou yon <iframe>
, nan yon eleman paran .ratio
ak yon klas rapò aspè. Eleman pitit imedya a otomatikman gwosè gras a seleksyon inivèsèl nou an .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Rapò aspè yo
Rapò aspè yo ka Customized ak klas modifye. Pa default klas rapò sa yo bay:
<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>
Rapò koutim
Chak .ratio-*
klas gen ladan yon pwopriyete koutim CSS (oswa CSS varyab) nan seleksyon an. Ou ka pase sou plas varyab CSS sa a pou kreye rapò aspè koutim sou vole ak kèk matematik rapid sou pati ou.
Pa egzanp, pou kreye yon rapò aspè 2x1, mete --bs-aspect-ratio: 50%
sou .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Varyab CSS sa a fè li fasil pou modifye rapò aspè yo atravè pwen rupture yo. Sa ki anba la a se 4x3 yo kòmanse, men chanjman nan yon koutim 2x1 nan pwen rupture mwayen an.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass kat jeyografik
Nan _variables.scss
, ou ka chanje rapò aspè ou vle itilize yo. Isit la nan kat default nou an $ratio-aspect-ratios
. Modifye kat la jan ou renmen epi rekonpile Sass ou a pou itilize yo.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);