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'afoeina o ata vitio po'o fa'ata'ita'iga fa'apipi'i fa'atatau ile lautele ole 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.

O fa'atusatusaga fa'atatau o lo'o fa'aalia i totonu o le fa'afanua Sass ma fa'aaofia i vasega ta'itasi e ala i le CSS fesuia'i, lea e fa'ataga ai fo'i fa'atusatusaga 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. Ole elemene ole tamaititi e otometi lava ona faʻafetai i la matou tagata filifilia lautele .ratio > *.

<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

<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

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

O lenei fesuiaiga CSS e faigofie ai ona suia le fua faatatau 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

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