Fara í aðalefni Farðu í skjalaleiðsögn
Check
in English

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

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