Girman girma

Sauƙaƙe yi wani kashi mai faɗi ko tsayi (dangane da iyayensa) tare da faɗin mu da tsayin kayan aikin mu.

An samar da kayan aikin faɗi da tsayi daga $sizestaswirar Sass a cikin _variables.scss. Ya haɗa da tallafi don 25%, 50%, 75%, da 100%ta tsohuwa. Gyara waɗannan dabi'u kamar yadda kuke buƙatar ƙirƙirar abubuwan amfani daban-daban anan.

Nisa 25%

Nisa 50%

Nisa 75%

Nisa 100%

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

Tsayi 25%

Tsayi 50%

Tsawo 75%

Tsayi 100%

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

Hakanan zaka iya amfani max-width: 100%;da max-height: 100%;kayan aiki da kayan aiki kamar yadda ake buƙata.

<img class="mw-100" src="..." alt="Max-width 100%">

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