Saamiyada

Isticmaal walxaha been abuurka ah si aad shay u ilaaliso saamiga doorashadaada. Ku fiican in si taxadar leh loo maareeyo fiidyowga ama sawir-gacmeedka gundhigga ee ku salaysan ballaca waalidka.

Boggan

Ku saabsan

Isticmaal kaaliyaha saamiga si aad u maamusho saami qaybsiga macluumaadka dibadda sida <iframe>s, <embed>s, <video>s, iyo <object>s. Caawiyaashan waxa kale oo loo isticmaali karaa cunsur kasta oo HTML ah oo caadi ah (tusaale, a <div>ama <img>). Qaababka waxaa si toos ah looga dabaqaa .ratiofasalka waalidka ilmaha.

Saamiyada dhinaca waxa lagu caddeeyey khariidadda Sass waxaana lagu daraa fasal kasta iyada oo loo marayo doorsoomiyaha CSS, kaas oo sidoo kale ogolaanaya saamiyo dhinaca caadada ah .

Talo-siin! Uma baahnid s frameborder="0"-kaaga <iframe>marka aanu taas kugu xad gudubno dib-u- boot .

Tusaale

Ku duub wax alla wixii gundhig ah, sida an <iframe>, oo ku jira walxaha waalidka .ratioiyo fasalka saamiga. Cunsurka ilmaha dhow si toos ah ayaa loo cabbiraa iyada oo ay mahad naqayso doorkeena caalamiga ah .ratio > *.

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Saamiyada dhinaca

Saamiyada dhinaca waxaa lagu habeyn karaa fasalada wax ka beddelka. Sida caadiga ah fasalada saamiga soo socda ayaa la bixiyaa:

1x1

4x3

16x9

21x9

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

Saamiyada gaarka ah

Fasal kasta .ratio-*waxa ku jira hanti caadadii CSS (ama doorsoomaha CSS) ee doorashada. Waxaad meesha ka saari kartaa doorsoomiyaha CSS-ga si aad u abuurto saamiyo dhinaca caado ah oo duullimaad ah oo leh xoogaa xisaab degdeg ah oo dhinacaaga ah.

Tusaale ahaan, si loo abuuro saamiga 2x1, --bs-aspect-ratio: 50%dhig .ratio.

2x1

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

Doorsoomiyaha CSS waxa uu fududeeyaa in wax laga beddelo saamiga dhinac ee meelaha jaban. Kuwa soo socdaa waa 4x3 si loo bilaabo, laakiin waxay u beddelaan caadadii 2x1 ee barta jabinta dhexdhexaadka ah.

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

4x3, ka dibna 2x1

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

Khariidadda Sass

Gudaha _variables.scss, waxaad bedeli kartaa saamiga dhinaca aad rabto inaad isticmaasho. Waa kan $ratio-aspect-ratioskhariidaddayada caadiga ah. Wax ka beddel khariidadda sidaad jeceshahay oo dib u samee Sass-kaaga si aad u isticmaasho.

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);