Nkyekyɛm ahorow
Fa generated pseudo elements di dwuma na ama element bi akura afã ratio a wopaw no mu. Ɛyɛ pɛpɛɛpɛ ma mmuae a wode bedi video anaa slideshow embeds a egyina ɔwofo no trɛw so ho dwuma.
Fa ho
Fa ratio boafo no di dwuma fa hwɛ afã ratio ahorow a ɛwɔ akyi nsɛm te sɛ <iframe>
s, <embed>
s, <video>
s, ne <object>
s no so. Saa aboafoɔ yi nso wobetumi de adi dwuma wɔ HTML abofra element biara a ɛyɛ gyinapɛn so (sɛ nhwɛso no, a <div>
anaa <img>
). Wɔde style ahorow di dwuma fi ɔwofo .ratio
adesuakuw no mu tẽẽ kɔ abofra no so.
Wɔbɔ afã nsusuwii ho dawuru wɔ Sass asase mfonini mu na wɔde ka adesua biara ho denam CSS nsakrae so, a ɛno nso ma kwan ma afã nsusuwii a wɔahyɛ da ayɛ .
Nhwɛsoɔ
Wrap embed biara, te sɛ <iframe>
, wɔ ɔwofo element a .ratio
ne aspect ratio class. Ntɛm ara abofra element no yɛ automatically sized aseda yɛn amansan selector .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Afã horow a wɔde di dwuma
Wobetumi de modifier adesua ahorow ayɛ afã nsusuwii ahorow no sɛnea wɔpɛ. Sɛnea wɔahyɛ no, wɔde ratio adesua ahorow a edidi so yi ama:
<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>
Amanneɛ kwan so nsusuwii ahorow
Klas biara .ratio-*
de CSS amanneɛbɔ agyapade (anaasɛ CSS nsakrae) ka ho wɔ pawfo no mu. Wubetumi abɔ saa CSS nsakrae yi so de ayɛ custom aspect ratios wɔ fly no so a akontaabu bi a ɛyɛ ntɛm wɔ wo fam.
Sɛ nhwɛso no, sɛ wopɛ sɛ wobɔ 2x1 afã nsusuwii a, fa --bs-aspect-ratio: 50%
si .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Saa CSS nsakraeɛ yi ma ɛyɛ mmerɛ sɛ wobɛsesa afã ratio no wɔ breakpoints nyinaa so. Nea edidi so yi yɛ 4x3 sɛ wubefi ase, nanso ɛsakra kɔ amanne 2x1 so wɔ mfinimfini breakpoint no so.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass asase mfonini
Wɔ _variables.scss
, mu no, wubetumi asesa afã horow a wopɛ sɛ wode di dwuma no. Yɛn $ratio-aspect-ratios
map a yɛde ahyɛ hɔ no ni. Sesa map no sɛnea wopɛ na san boaboa wo Sass no ano ma wɔde di dwuma.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);