Таносубҳо

Унсурҳои псевдо тавлидшударо истифода баред, то ки унсур таносуби ҷанбаҳои интихобкардаи шуморо нигоҳ дорад. Мукаммал барои коркарди вокуниши видео ё слайд-шоу дар асоси паҳнои волидайн.

Дар ин саҳифа

Дар бораи

<iframe>Барои идора кардани таносуби ҷанбаҳои мундариҷаи беруна, ба монанди s, <embed>s, <video>s, ва s, ёвари таносубро истифода баред <object>. Ин ёварҳоро инчунин дар ҳама гуна унсури кӯдаки стандартии HTML истифода бурдан мумкин аст (масалан, a <div>ё <img>). Услубҳо аз .ratioсинфи волидайн бевосита ба кӯдак татбиқ карда мешаванд.

Таносуби ҷанбаҳо дар харитаи Sass эълон карда мешаванд ва ба ҳар як синф тавассути тағирёбандаи CSS дохил карда мешаванд, ки ин инчунин таносуби ҷанбаҳои фармоиширо имкон медиҳад .

Pro-Tip! frameborder="0"Шумо ба с-и худ ниёз надоред <iframe>, зеро мо инро барои шумо дар Reboot бекор мекунем .

Мисол

<iframe>Ҳама гуна дохилкуниро, ба монанди , дар як унсури волидайн бо .ratioсинфи таносуби тарафҳо печонед . Ба шарофати селектори универсалии мо, унсури кӯдаки фаврӣ ба таври худкор андоза карда .ratio > *мешавад.

html

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Таносуби тарафҳо

Таносуби тарафҳоро бо синфҳои тағирдиҳанда танзим кардан мумкин аст. Бо нобаёнӣ синфҳои зерини таносуб пешбинӣ шудаанд:

1х1

4х3

16х9

21х9

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>

Таносуби фармоишӣ

Ҳар як .ratio-*синф дорои моликияти фармоишии CSS (ё тағирёбандаи CSS) дар селектор аст. Шумо метавонед ин тағирёбандаи CSS-ро бекор кунед, то таносуби ҷанбаҳои фармоиширо дар парвоз бо математикаи зуд эҷод кунед.

Масалан, барои сохтани таносуби 2x1, --bs-aspect-ratio: 50%дар .ratio.

2х1

html

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

Ин тағирёбандаи CSS тағир додани таносуби ҷанбаҳоро дар байни нуқтаҳои буриш осон мекунад. Дар зер 4x3 барои оғоз кардан аст, аммо дар нуқтаи шикасти миёна ба 2x1 фармоишӣ тағир меёбад.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

4х3, баъд 2х1

html

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

Харитаи Sass

Дар дохили _variables.scss, шумо метавонед таносуби ҷанбаҳоеро, ки мехоҳед истифода баред, тағир диҳед. $ratio-aspect-ratiosИн аст харитаи пешфарзии мо . Харитаро мувофиқи хоҳишатон тағир диҳед ва Sass-и худро аз нав тартиб диҳед, то онҳоро истифода барад.

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);