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.
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 .ratio
sa'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 .
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 .ratio
ma 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:
<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
.
<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
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass faafanua
I totonu o _variables.scss
le , e mafai ona e suia le faʻatusatusaga o le itu e te manaʻo e faʻaoga. $ratio-aspect-ratios
O 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%)
);