Di ratios dɛn
Yuz jenarayz pseudo elemɛnt fɔ mek wan ɛlimɛnt mentɛn di aspek rɛsɛshɔn we yu pik. Pafɛkt fɔ ansa di vidio ɔ slayd sho ɛmbad dɛn bay di wit we di mama ɔ papa gɛt.
Bɔt
Yuz di ratio ɛlda fɔ manej di aspek ratio dɛn fɔ ɛksternal kɔntinyu lɛk <iframe>
s, <embed>
s, <video>
s, ɛn <object>
s. Dɛn ɛp dɛn ya kin yuz dɛn bak pan ɛni standad HTML pikin ɛlimɛnt (ɛgz., a <div>
ɔ <img>
). Dɛn kin yuz stayl dɛn frɔm di mama ɛn papa .ratio
klas dairekt to di pikin.
Aspek rɛsɛshɔn dɛn de diklar insay wan Sass map ɛn inklud insay ɛni klas via CSS vɛriɔbul, we de alaw bak kɔstɔm aspek rɛsɛshɔn .
frameborder="0"
pan yu
<iframe>
s as wi de ɔvalayz dat fɔ yu na
Ribɔt .
Ɛgzampul
Rap ɛni ɛmbad, lɛk wan <iframe>
, insay wan mama ɛn papa ɛlimɛnt wit .ratio
ɛn wan aspek rɛtɛshɔn klas. Di immediate child element de otomatik saiz tanks to wi yunivasal selekta .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Aspek rɛsɛshɔn dɛn
Aspek ratios kin kɔstɔmayz wit modifya klas dɛn. Bay difɔlt dɛn de gi di fɔs ratio klas dɛn:
<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>
Kastom ratios dɛn
Ɛni .ratio-*
klas gɛt wan CSS kɔstɔm prɔpati (ɔ CSS vɛriɔbul) na di sɛlɛktɔ. Yu kin ɔvalayz dis CSS vɛriɔbul fɔ mek kɔstɔm aspek rɛsɛshɔn dɛn na di flay wit sɔm kwik mats na yu pat.
Fɔ ɛgzampul, fɔ mek yu gɛt 2x1 aspek rɛtɛshɔn, sɛt --bs-aspect-ratio: 50%
am na di .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Dis CSS vɛriɔbul de mek am izi fɔ chenj di aspek rɛtɛshɔn akɔdin to brekpɔynt dɛn. Di wan dɛn we de dɔŋ ya na 4x3 fɔ stat, bɔt i chenj to kɔstɔm 2x1 na di midul brekpɔynt.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass na map
Insay _variables.scss
, yu kin chenj di aspek ratio dɛn we yu want fɔ yuz. Na dis na wi difɔlt $ratio-aspect-ratios
map. Modify di map as yu laik en rekompile yu Sass fo put dem fo yus.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);