Катнашу

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

Бу биттә

Турында

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

Аспект ставкалары Sass картасында игълан ителә һәм CSS үзгәрүчесе аша һәр класска кертелә, бу шулай ук махсус аспект дәрәҗәләрен рөхсәт итә .

Киңәш! Сезнең өчен кирәк түгел , чөнки без frameborder="0"сезнең өчен Reboot'та . <iframe>

Мисал

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

Махсус катнашу

Eachәр .ratio-*класска селекторда CSS махсус милеге (яки CSS үзгәрүчесе) керә. Сез бу CSS үзгәрүчене кире кагарга мөмкин, чебендә махсус аспектлар булдыру өчен, сезнең тиз математика белән.

Мисал өчен, 2х1 аспект коэффициентын булдыру --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>

Сасс картасы

Эчтә _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%)
);