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.
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 .ratio
beint á 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 .
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ð .ratio
og 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:
<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
.
<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
}
}
<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-ratios
kort 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%)
);