Cymarebau

Defnyddiwch elfennau ffug a gynhyrchir i wneud i elfen gynnal y gymhareb agwedd o'ch dewis. Perffaith ar gyfer trin mewnosodiadau fideo neu sioe sleidiau yn ymatebol yn seiliedig ar led y rhiant.

Ar y dudalen hon

Ynghylch

Defnyddiwch y cynorthwyydd cymarebau i reoli cymarebau agwedd cynnwys allanol fel <iframe>s, <embed>s, <video>s, ac <object>s. Gellir defnyddio'r cynorthwywyr hyn hefyd ar unrhyw elfen plentyn HTML safonol (ee, a <div>neu <img>). Cymhwysir arddulliau o'r .ratiodosbarth rhiant yn uniongyrchol i'r plentyn.

Mae cymarebau agwedd yn cael eu datgan mewn map Sass a'u cynnwys ym mhob dosbarth trwy newidyn CSS, sydd hefyd yn caniatáu cymarebau agwedd arferol .

Pro-Tip! Nid oes angen frameborder="0"ar eich <iframe>s gan ein bod yn diystyru hynny i chi yn Reboot .

Enghraifft

Lapiwch unrhyw fewnosod, fel <iframe>, mewn elfen rhiant gyda .ratiodosbarth cymhareb agwedd. Mae maint yr elfen plentyn uniongyrchol yn awtomatig diolch i'n dewisydd cyffredinol .ratio > *.

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

Cymarebau agwedd

Gellir addasu cymarebau agwedd gyda dosbarthiadau addaswyr. Yn ddiofyn, darperir y dosbarthiadau cymarebau canlynol:

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>

Cymarebau personol

Mae pob .ratio-*dosbarth yn cynnwys priodwedd arfer CSS (neu newidyn CSS) yn y dewisydd. Gallwch ddiystyru'r newidyn CSS hwn i greu cymarebau agwedd arferol ar y hedfan gyda rhywfaint o fathemateg gyflym ar eich rhan.

Er enghraifft, i greu cymhareb agwedd 2x1, gosodwch --bs-aspect-ratio: 50%ar y .ratio.

2x1

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

Mae'r newidyn CSS hwn yn ei gwneud hi'n hawdd addasu'r gymhareb agwedd ar draws torbwyntiau. Mae'r canlynol yn 4x3 i ddechrau, ond yn newid i 2x1 arferiad ar y torbwynt canolig.

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

4x3, yna 2x1

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

Map Sass

O fewn _variables.scss, gallwch newid y cymarebau agwedd rydych chi am eu defnyddio. Dyma ein $ratio-aspect-ratiosmap rhagosodedig. Addaswch y map fel y dymunwch ac ail-grynhoi eich Sass i'w ddefnyddio.

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