Tauwehenga

Whakamahia nga huānga pseudo i hangaia kia mau ai tetahi huānga i te ahua ōwehenga o taau e whiriwhiri ai. He tino pai mo te aro ki te whakahaere ataata, whakaatakiriata ranei i runga i te whanui o te matua.

I tenei wharangi

Mō

Whakamahia te kaiawhina ōwehenga ki te whakahaere i nga ahuatanga ōwehenga o nga ihirangi o waho penei <iframe>i te s, <embed>s, <video>s, me <object>s. Ka taea hoki te whakamahi i enei kaiawhina ki runga i tetahi huānga tamariki HTML paerewa (hei tauira, he <div>) <img>. .ratioKo nga ahua ka tukuna mai i te akomanga matua ki te tamaiti.

Ka whakapuakihia nga ahuatanga ōwehenga i roto i te mahere Sass ka whakauruhia ki ia akomanga ma te taurangi CSS, ka taea hoki te whakarite owehenga ahuatanga .

Aki-Aki! Kaore koe e hiahia frameborder="0"i runga i to <iframe>s na te mea ka whakakorea e matou tera mo koe i Reboot .

Tauira

Tākaihia ngā tāmau, pēnei i te <iframe>, ki tētahi huānga matua .ratiome te akomanga āhuatanga ōwehenga. Ko te huānga o te tamaiti tonu he rahi aunoa na to tatou kaikowhiri ao .ratio > *.

html

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Ahuatanga ōwehenga

Ka taea te whakarite owehenga ahuatanga me nga karaehe whakarereke. Ma te taunoa ka whakaratohia nga akomanga owehenga e whai ake nei:

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>

Ritenga ōwehenga

Kei ia .ratio-*karaehe he taonga ritenga CSS (he taurangi CSS ranei) kei roto i te kaiwhiriwhiri. Ka taea e koe te whakakore i tenei taurangi CSS ki te hanga i nga owehenga ritenga ritenga i runga i te rere me etahi pangarau tere ki a koe.

Hei tauira, ki te hanga i te 2x1 ahua ōwehenga, whakatakotoria --bs-aspect-ratio: 50%ki te .ratio.

2x1

html

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

Ko tenei taurangi CSS he mea ngawari ki te whakarereke i te waahanga owehenga puta noa i nga waahi pakaru. Ko te 4x3 e whai ake nei hei tiimata, engari ka huri ki te ritenga 2x1 i te waahi wehenga waenga.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

4x3, ka 2x1

html

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

Mapi Sass

I roto i _variables.scsste , ka taea e koe te huri i nga ahuatanga ōwehenga e hiahia ana koe ki te whakamahi. Anei ta matou $ratio-aspect-ratiosmapi taunoa. Whakarerekētia te mapi kia rite ki taau e pai ai ka whakahiato ano i to Sass hei whakamahi.

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);