Ikigereranyo
Koresha ibyakozwe na pseudo kugirango ukore ikintu gikomeza igipimo cyo guhitamo. Byuzuye kugirango ushireho amashusho cyangwa amashusho yerekana amashusho ukurikije ubugari bwababyeyi.
Ibyerekeye
Koresha igipimo gifasha gucunga ibice bigize ibintu byo hanze nka <iframe>
s, <embed>
s, <video>
s, na <object>
s. Aba bafasha barashobora kandi gukoreshwa kubintu byose bisanzwe bya HTML byabana (urugero, a <div>
cyangwa <img>
). Imisusire ikoreshwa kuva mubyiciro byababyeyi .ratio
ku mwana.
Ikigereranyo cya Aspect gitangazwa ku ikarita ya Sass kandi kigashyirwa muri buri cyiciro hifashishijwe impinduka ya CSS, nayo yemerera ibipimo byihariye .
Urugero
Kuzuza icyaricyo cyose, nka an <iframe>
, mubintu byababyeyi hamwe .ratio
nicyiciro cyagereranijwe. Ikintu cyumwana uhita gifite ubunini dukesha abaduhitamo kwisi yose .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Ibipimo byerekana
Ibipimo byerekana bishobora gutegurwa hamwe namasomo yo guhindura. Mubusanzwe ibyiciro bikurikira byatanzwe:
<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>
Ikigereranyo cyihariye
Buri .ratio-*
cyiciro kirimo imitungo ya CSS (cyangwa CSS ihinduka) mubatoranya. Urashobora guhisha iyi CSS ihinduka kugirango ukore igipimo cyihariye cyo kuguruka hamwe n imibare yihuse kuruhande rwawe.
Kurugero, kurema igipimo cya 2x1, gishyirwa --bs-aspect-ratio: 50%
kuri .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Ihinduka rya CSS ryoroshe guhindura igipimo cyibice bitandukanye. Ibikurikira ni 4x3 kugirango utangire, ariko uhindure kumugenzo 2x1 kumurongo wo hagati.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Ikarita ya Sass
Imbere _variables.scss
, urashobora guhindura ibipimo ushaka gukoresha. Dore $ratio-aspect-ratios
ikarita idasanzwe. Hindura ikarita uko ubishaka kandi usubiremo Sass yawe kugirango uyikoreshe.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);