Ikigereranyo

Koresha ibyakozwe na pseudo kugirango ukore ikintu gikomeza igipimo cyo guhitamo. Byuzuye kugirango ushireho amashusho cyangwa amashusho yerekana amashusho ukurikije ubugari bwababyeyi.

Kuriyi page

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 .ratioku mwana.

Ikigereranyo cya Aspect gitangazwa ku ikarita ya Sass kandi kigashyirwa muri buri cyiciro hifashishijwe impinduka ya CSS, nayo yemerera ibipimo byihariye .

Impanuro! Ntukeneye frameborder="0"kuri <iframe>s nkuko tubirengaho kubwawe muri Reboot .

Urugero

Kuzuza icyaricyo cyose, nka an <iframe>, mubintu byababyeyi hamwe .rationicyiciro cyagereranijwe. Ikintu cyumwana uhita gifite ubunini dukesha abaduhitamo kwisi yose .ratio > *.

html

<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:

1x1

4x3

16x9

21x9

html

<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 umutungo wa CSS (cyangwa CSS ihinduka) mubatoranya. Urashobora guhisha iyi CSS ihinduka kugirango ukore igipimo cyihariye cyo kuguruka kuguruka hamwe nimibare yihuse kuruhande rwawe.

Kurugero, kurema igipimo cya 2x1, gishyirwa --bs-aspect-ratio: 50%kuri .ratio.

2x1

html

<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
  }
}

4x3, hanyuma 2x1

html

<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-ratiosikarita 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%)
);