Hlutföll

Notaðu myndaða gerviþætti til að láta frumefni viðhalda stærðarhlutfallinu sem þú velur. Fullkomið til að meðhöndla vídeó eða skyggnusýningar með viðbragðsgóðum hætti miðað við breidd foreldris.

Á þessari síðu

Um

Notaðu hlutfallshjálpina til að stjórna stærðarhlutföllum ytra efnis eins og <iframe>s, <embed>s, <video>s og <object>s. Þessa hjálpara er einnig hægt að nota á hvaða venjulegu HTML undireiningu sem er (td a <div>eða <img>). Stílar eru beittir frá foreldrabekknum .ratiobeint á barnið.

Hlutföll eru gefin upp í Sass korti og innifalin í hverjum flokki í gegnum CSS breytu, sem leyfir einnig sérsniðin stærðarhlutföll .

Pro-Tip! Þú þarft ekki frameborder="0"á tölvunni þinni <iframe>þar sem við hnekkum því fyrir þig í endurræsingu .

Dæmi

Vefjið hvaða innfellingu sem er, eins og <iframe>, í yfireiningu með .ratioog stærðarhlutfallsflokki. Barnaþátturinn er sjálfkrafa að stærð þökk sé alhliða valinu okkar .ratio > *.

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

Hlutföll

Hægt er að aðlaga stærðarhlutföll með breytiflokkum. Sjálfgefið er að eftirfarandi hlutfallsflokkar séu gefnir upp:

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>

Sérsniðin hlutföll

Hver .ratio-*flokkur inniheldur CSS sérsniðna eiginleika (eða CSS breytu) í valinu. Þú getur hnekkt þessari CSS breytu til að búa til sérsniðin stærðarhlutföll á flugi með fljótlegri stærðfræði af þinni hálfu.

Til dæmis, til að búa til 2x1 stærðarhlutfall skaltu stilla --bs-aspect-ratio: 50%á .ratio.

2x1

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

Þessi CSS breyta gerir það auðvelt að breyta stærðarhlutföllum yfir brotpunkta. Eftirfarandi er 4x3 til að byrja, en breytist í sérsniðið 2x1 við miðlungs brot.

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

4x3, síðan 2x1

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

Sass kort

Innan _variables.scss, getur þú breytt stærðarhlutföllum sem þú vilt nota. Hér er sjálfgefið $ratio-aspect-ratioskort okkar. Breyttu kortinu eins og þú vilt og settu Sass saman aftur til að nota þau.

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