in English

fua faatatau

Fa'aaoga elemene pseudo fa'atupuina e fa'atumauina ai e se elemene le fua fa'atatau o lau filifiliga. E lelei atoatoa mo le faʻaogaina o ata vitio poʻo faʻataʻitaʻiga faʻapipiʻi faʻavae i luga o le lautele o matua.

I luga o lenei itulau

E uiga i

Fa'aoga le fesoasoani fa'atatau e fa'atautaia ai fa'atusatusaga o mea i fafo e pei o <iframe>le s, <embed>s, <video>s, ma <object>le s. E mafai fo'i ona fa'aoga nei fesoasoani i so'o se mea e masani ai tamaiti HTML (fa'ata'ita'iga, a <div>po'o le <img>). O sitaili e fa'aoga .ratiosa'o mai le vasega matua i le tamaititi.

Fa'atusa fa'atusa o lo'o fa'aalia i totonu o se fa'afanua Sass ma aofia i vasega ta'itasi e ala i le CSS fesuiaiga, lea e fa'atagaina ai fo'i fa'avasegaga fa'ale-aganu'u .

Fesoasoani-Fautuaga! E te le manaʻomia frameborder="0"i lau <iframe>s a o matou faʻamalo lena mo oe ile Toe faʻafou .

Faataitaiga

Afifi so'o se mea fa'apipi'i, pei o se <iframe>, i totonu o se elemene matua .ratioma se vasega fa'atusa. O le elemene tamaiti vave e otometi lava le lapopoa faafetai i le tatou tagata filifilia lautele .ratio > *.

html

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

Fa'avasegaga

E mafai ona fa'avasegaina fa'atusatusaga fa'atasi ma vasega fa'aleleia. E le mafai ona tu'uina atu vasega fa'atusatusa 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>

Tulaga fa'apitoa

O .ratio-*vasega ta'itasi e aofia ai se mea totino aganu'u CSS (po'o le fesuiaiga CSS) i le tagata filifilia. E mafai ona e fa'ato'a le suiga o le CSS e fatu ai fua fa'atatau fa'ale-aganu'u i luga ole lele ma sina numera vave i lau vaega.

Mo se faʻataʻitaʻiga, e fai se fua faʻatatau 2x1, seti --bs-aspect-ratio: 50%i luga o le .ratio.

2x1

html

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

O lenei fesuiaiga CSS e faigofie ai ona suia le fua faʻatatau i luga ole vaeluaga. Ole mea lea ole 4x3 e amata ai, ae suia ile 2x1 masani ile vaeluagalemu.

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

4x3, ona 2x1

html

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

Sass faafanua

I totonu o _variables.scssle , e mafai ona e suia le faʻatusatusaga o le itu e te manaʻo e faʻaoga. $ratio-aspect-ratiosO la matou fa'afanua fa'aletonu . Suia le faafanua e te manaʻo ai ma toe faʻapipiʻi lau Sass e faʻaoga.

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