Source

Sizing (Sizing) kɛ

Aw bɛ fɛn dɔ kɛ nɔgɔya la min ka bon walima ka janya ni an ka bonya ni janya nafamafɛnw ye.

Somɔgɔw ni bangebaga

bonya ni janya nafalanw bɛ sɔrɔ $sizesSass kariti la san _variables.scss. A bɛ dɛmɛ don 25%, 50%, 75%, 100%, ani autoa daminɛ na. O nafaw bεε bε Yεlεma i n’a fɔ i mago bε cogo min na ka nafalan suguya wɛrɛw Sɔrɔ yan.

Bonya 25% ye .
Largeur 50% ye .
Bonya 75% .
Largeur 100% ye .
Largeur auto 
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
Janya 25% ye .
Janya 50% ye .
Janya 75% ye .
Janya 100%
Janya auto 
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>

Aw bɛ se fana ka baara kɛ max-width: 100%;ni ani max-height: 100%;nafamafɛnw ye i n’a fɔ aw mago bɛ cogo min na.

Placeholder Max-width 100% 
<img src="..." class="mw-100" alt="...">
Max-haute 100% Bamako 
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>

A bɛ tali kɛ filɛlikɛyɔrɔ la

Aw bɛ se fana ka baara kɛ ni nafamafɛnw ye walasa ka bonya ni janya sigi ka kɛɲɛ ni filɛlikɛlan ye.

<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>