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į.

Šiame puslapyje

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ų .ratioklasė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 .

Pro-Patarimas! Jums nereikia frameborder="0"savo <iframe>s, nes mes nepaisome to jums perkrovimo metu .

Pavyzdys

Apvyniokite bet kokį įterpimą, pvz. <iframe>, , pirminiame elemente su .ratioir 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:

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>

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

2x1

<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
  }
}

4x3, tada 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%)
);