Ratio

Mampiasà singa pseudo novokarina 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.

Amin'ity pejy ity

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 .ratiokilasin'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 .

Pro-Tip! Tsy mila 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 .ratioamin'ny kilasy aspect ratio. Ny singan'ny zaza eo no ho eo dia amboarina ho azy noho ny safidinay manerantany .ratio > *.

html

<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:

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>

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.

2x1

html

<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
  }
}

4x3 sy 2x1

html

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