Пропорциялар

Элементти сиз тандаган тараптардын катышын сактап калуу үчүн түзүлгөн псевдо элементтерди колдонуңуз. Ата-эненин кеңдигине негизделген видео же слайдшоу жабыштырууларды жооптуулук менен иштетүү үчүн идеалдуу.

Бул бетте

Жөнүндө

<iframe>s, <embed>s, <video>s жана s сыяктуу тышкы мазмундун катыштарын башкаруу үчүн катыш жардамчысын колдонуңуз <object>. Бул жардамчыларды каалаган стандарттуу HTML бала элементинде да колдонсо болот (мисалы, a <div>же <img>). Стилдер ата-эне .ratioклассынан түздөн-түз балага колдонулат.

Аспект катыштары Sass картасында жарыяланып, ар бир класска CSS өзгөрмөлөрү аркылуу киргизилет, бул ошондой эле ыңгайлаштырылган аспектилердин катышына мүмкүндүк берет .

Про учу! Сизге кереги жок frameborder="0", анткени биз аны кайра жүктөөдө<iframe> сиз үчүн жокко чыгарабыз .

Мисал

Каалоо классы жана <iframe>негизги элементи сыяктуу каалаган кыстарууну ороп алыңыз . .ratioБиздин универсалдуу селектордун аркасында дароо бала элемент автоматтык түрдө өлчөмгө ээ болот .ratio > *.

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

Аспект катыштары

Аспект катыштарын модфикатор класстары менен ыңгайлаштырса болот. Демейки боюнча төмөнкү катыш класстары берилет:

1x1

4х3

16x9

21x9

<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

<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

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