Rationes
Pseudo elementis generatis utere ut elementum adspectum rationis tuae eligendo teneas. Perfecta responsionis tractatio video vel slideshow embedsibus subnixa latitudine parentis.
De
Ratio adiutoris utere ut rationes contentorum externorum administrandi rationes <iframe>
s, <embed>
s, <video>
s, <object>
s. Hi adiutores etiam in quavis norma HTML infantis elementi (eg, a <div>
vel <img>
) adhiberi possunt. Styli applicantur a genere parentis .ratio
directe ad puerum.
Aspectus rationes in tabula Sass declarantur et in unoquoque genere per CSS variabiles comprehenduntur, quae etiam rationes consuetudinis admittit .
Exemplum
Involve quodvis embed , sicut <iframe>
elementum , in parentis elementum cum .ratio
ratione et ratione ordinis . Puer immediatus elementum ipso facto nostro electori universali amplitudo est .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Rationes aspectum
Rationes aspectum esse possunt cum classibus modifier nativus. Per defaltam hanc rationem genera praebentur:
<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>
Consuetudo rationibus
Singula .ratio-*
classis includit proprietatem CSS consuetudinis (vel CSS variabilis) in electore. Hanc CSS variabilem vincire potes ut aspectum consuetudinis rationes in musca cum aliqua parte tua celeri math.
Exempli gratia, rationem creare aspectum 2x1, pone --bs-aspect-ratio: 50%
in .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Haec variabilis CSS efficit ut facilem rationem aspectum per abruptiones mutaret. Sequens est 4x3 incipere, sed mutat ad consuetudinem 2x1 in medio breakpoint.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass map
Intus _variables.scss
, rationem mutare vis uti velis. Hic $ratio-aspect-ratios
tabula nostra defalta est. Mutare mappam sicut voles et Sass compone ut ea utaris.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);