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.

Na lokasa oyo

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 .ratioclasse 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 .

Pro-Toli ya kosala! Ozali na besoin te na 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 .ratiompe 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:

1x1

4x3

16x9 ezali

21x9 ezali

<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 superposer variable oyo ya CSS pona kosala 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.

2x1

<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 moyen.

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

4x3, na nsima 2x1

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

Sass na karte

Na kati _variables.scssya , okoki kobongola ba aspect ratios oyo olingi kosalela. Tala $ratio-aspect-ratioscarte 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%)
);