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.
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 .ratio
dosbarth 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 .
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 .ratio
dosbarth 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:
<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
.
<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
}
}
<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-ratios
map 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%)
);