Qhov loj me

Yooj yim ua ib lub caij dav lossis siab (kwv yees rau nws niam nws txiv) nrog peb cov khoom siv dav thiab qhov siab.

Qhov dav thiab qhov siab qhov hluav taws xob yog tsim los ntawm $sizesSass daim ntawv qhia hauv _variables.scss. Xws li kev txhawb nqa rau 25%, 50%, 75%, 100%, thiab autolos ntawm lub neej ntawd. Hloov kho cov txiaj ntsig raws li koj xav tau los tsim cov khoom siv sib txawv ntawm no.

Dav 25%

Dav 50%

Dav 75%

Dav 100%

Dav 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>

Qhov siab 25%

Qhov siab 50%

Qhov siab 75%

Qhov siab 100%

Qhov siab 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>

Koj tuaj yeem siv max-width: 100%;thiab max-height: 100%;cov khoom siv hluav taws xob raws li xav tau.

<img class="mw-100" src=".../1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">

Max-siab 100%

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