Ba ratios
Salelá ba pseudo éléments oyo esalemi mpo na kosala ete élément moko ebatela rapport ya aspect oyo oponi. Parfait pona ko répondre na réponse ya ba embeds ya vidéo to ya diaporama na kotalela bonene ya moboti.
Pene
Salelá mosungi ya ratio mpo na kotambwisa ba ratios ya aspect ya makambo ya libanda lokola <iframe>
s, <embed>
s, <video>
s, mpe <object>
s. Basungi oyo ekoki mpe kosalelama na eloko nyonso ya mwana HTML ya momesano (ndakisa, a <div>
to <img>
). Ba styles esalemaka depuis .ratio
classe ya parent directement na mwana.
Ba rapports ya aspect esakolami na carte ya Sass mpe ekotisami na classe moko na moko na nzela ya variable CSS, oyo epesaka mpe nzela na ba aspect ratios personnalisés .
frameborder="0"
na yo
<iframe>
lokola to override yango pona yo na
Reboot .
Ndakisa
Envelopper toute embed, lokola <iframe>
, na élément parent na .ratio
mpe classe ya aspect ratio. Elemento ya mwana ya mbala moko ezali na taille automatiquement grâce na sélecteur universel na biso .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Ba rapports ya ba aspects
Ba rapports ya aspect ekoki kozala personnalisé na ba classes ya modificateur. Par défaut ba classes ya ratio oyo elandi epesami:
<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>
Ba ratios ya coutume
Kelasi moko .ratio-*
na moko ezali na propriété personnalisée ya CSS (to variable CSS) na selecteur. Okoki ko overrider variable oyo ya CSS pona ko créer ba aspect ratios personnalisés na vol na mua mathématiques ya mbangu na ngambo na yo.
Na ndakisa, mpo na kosala rapport ya aspect 2x1, tyá --bs-aspect-ratio: 50%
yango na .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Variable oyo ya CSS esalaka que ezala facile ya ko modifier rapport ya aspect na ba points de rupture. Oyo elandi ezali 4x3 mpo na kobanda, kasi ebongwanaka na 2x1 ya momesano na point de rupture ya moyenne.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass na karte
Na kati _variables.scss
ya , okoki kobongola ba aspect ratios oyo olingi kosalela. Tala $ratio-aspect-ratios
carte na biso ya défaut. Modifier carte ndenge olingi pe recompiler Sass na yo po otia bango na usage.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);