Ratio
Mampiasà singa pseudo noforonina mba hahatonga singa iray hihazona ny aspect ratio izay nofidinao. Tonga lafatra amin'ny fikirakirana ny horonan-tsary na sary mihetsika mifototra amin'ny sakan'ny ray aman-dreny.
About
Ampiasao ny mpanampy ny tahan'ny hitantana ny tahan'ny lafiny amin'ny atiny ivelany toy ny <iframe>
s, <embed>
s, <video>
s, ary <object>
s. Ireo mpanampy ireo koa dia azo ampiasaina amin'ny singa HTML mahazatra rehetra (oh: a <div>
na <img>
). Ny fomba dia ampiharina avy amin'ny .ratio
kilasin'ny ray aman-dreny mivantana amin'ny ankizy.
Ny tahan'ny lafiny dia ambara amin'ny sarintany Sass ary ampidirina ao amin'ny kilasy tsirairay amin'ny alàlan'ny fari-piadidiana CSS, izay mamela ihany koa ny tahan'ny lafiny manokana .
frameborder="0"
ao amin'ny
<iframe>
s anao ianao satria averinay izany ho anao amin'ny
Reboot .
OHATRA
Fenoy izay embed, toy ny <iframe>
, amin'ny singa ray aman-dreny miaraka .ratio
amin'ny kilasy aspect ratio. Ny singan'ny zaza eo no ho eo dia amboarina ho azy noho ny safidinay manerantany .ratio > *
.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Aspect ratios
Aspect ratios dia azo amboarina amin'ny kilasy modifier. Amin'ny alàlan'ny default dia omena ireto kilasy manaraka ireto:
<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>
Fizarana manokana
Ny .ratio-*
kilasy tsirairay dia misy fananana CSS mahazatra (na fari-piadidiana CSS) ao amin'ny mpifidy. Azonao atao ny manafoana ity fari-piainan'ny CSS ity mba hamoronana taham-pitenenana mahazatra amin'ny lalitra miaraka amin'ny matematika haingana avy aminao.
Ohatra, mba hamoronana aspect ratio 2x1, apetraho --bs-aspect-ratio: 50%
amin'ny .ratio
.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
Ity fari-piainan'ny CSS ity dia manamora ny fanovana ny tahan'ny lafiny amin'ny teboka tapaka. Ity manaraka ity dia 4x3 hanombohana, fa miova ho 2x1 mahazatra amin'ny toerana fiatoana antonony.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sarintany Sass
Ao anatin'ny _variables.scss
, azonao atao ny manova ny tahan'ny lafiny tianao hampiasaina. Ity ny $ratio-aspect-ratios
sari-tany mahazatra anay. Ovao ny sari-tany araka izay tianao ary amboary indray ny Sass-nao mba hampiasaina.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);