Santykiai
Naudokite sugeneruotus pseudo elementus, kad elementas išlaikytų jūsų pasirinktą formato santykį. Puikiai tinka reaguojant į vaizdo įrašų ar skaidrių demonstravimo įterpimus, atsižvelgiant į pagrindinio elemento plotį.
Apie
Naudokite santykio pagalbinę priemonę išorinio turinio, pvz <iframe>
., s, <embed>
s, <video>
s ir <object>
s, formato santykiams valdyti. Šie pagalbininkai taip pat gali būti naudojami bet kuriame standartiniame HTML antriniame elemente (pvz., a <div>
arba <img>
). Stiliai taikomi iš tėvų .ratio
klasės tiesiai vaikui.
Kraštinių santykiai deklaruojami Sass žemėlapyje ir įtraukiami į kiekvieną klasę naudojant CSS kintamąjį, kuris taip pat leidžia tinkinti formato koeficientus .
frameborder="0"
savo
<iframe>
s, nes mes nepaisome to jums
perkrovimo metu .
Pavyzdys
Apvyniokite bet kokį įterpimą, pvz. <iframe>
, , pirminiame elemente su .ratio
ir formato santykio klase. Tiesioginis antrinis elementas yra automatiškai parenkamas dėl mūsų universalaus parinkiklio .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Kraštinių santykiai
Kraštinių santykius galima tinkinti naudojant modifikatorių klases. Pagal numatytuosius nustatymus pateikiamos šios santykio klasės:
<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>
Individualūs santykiai
Kiekvienoje .ratio-*
klasėje parinkiklyje yra pasirinktinė CSS ypatybė (arba CSS kintamasis). Galite nepaisyti šio CSS kintamojo, kad sukurtumėte tinkintus formato koeficientus, atlikdami greitą matematiką.
Pavyzdžiui, norėdami sukurti 2x1 formato koeficientą, nustatykite --bs-aspect-ratio: 50%
..ratio
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Šis CSS kintamasis leidžia lengvai keisti kraštinių santykį tarp lūžio taškų. Pradėti yra 4x3, bet vidutinės pertraukos taške pakeičiama į tinkintą 2x1.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Saso žemėlapis
Naudodami _variables.scss
, galite pakeisti norimus naudoti formato koeficientus. Štai mūsų numatytasis $ratio-aspect-ratios
žemėlapis. Modifikuokite žemėlapį, kaip norite, ir iš naujo sukompiliuokite „Sass“, kad galėtumėte juos naudoti.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);