ꯔꯦꯁꯤꯑꯣꯁꯤꯡ꯫

ꯃꯔꯝꯗꯤ

<iframe>s, <embed>s, <video>s, ꯑꯃꯁꯨꯡ sꯒꯨꯝꯕꯥ ꯃꯄꯥꯅꯒꯤ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯑꯦꯁ꯭ꯄꯦꯛꯇ ꯔꯦꯁꯤꯑꯣꯁꯤꯡ ꯃꯦꯅꯦꯖ ꯇꯧꯅꯕꯥ ꯔꯦꯁꯤꯑꯣ ꯍꯦꯜꯄꯔ <object>ꯁꯤꯖꯤꯟꯅꯧ꯫ <div>ꯍꯥꯌꯔꯤꯕꯥ ꯍꯦꯜꯄꯔꯁꯤꯡ ꯑꯁꯤ ꯁ꯭ꯇꯦꯟꯗꯔꯗ HTML ꯆꯥꯏꯜꯗ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯗꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, a ꯅꯠꯠꯔꯒꯥ <img>) ꯁꯤꯖꯤꯟꯅꯕꯁꯨ ꯌꯥꯏ꯫ .ratioꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯑꯁꯤ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯀ꯭ꯂꯥꯁꯇꯒꯤ ꯍꯀꯊꯦꯡꯅꯅꯥ ꯑꯉꯥꯡ ꯑꯗꯨꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫

ꯑꯦꯁ꯭ꯄꯦꯛꯇ ꯔꯦꯁꯤꯑꯣꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯗꯥ ꯂꯥꯎꯊꯣꯛꯂꯤ ꯑꯃꯁꯨꯡ ꯀ꯭ꯂꯥꯁ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯂꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯌꯥꯑꯣꯏ, ꯃꯁꯤꯅꯥ ꯀꯁ꯭ꯇꯝ ꯑꯦꯁ꯭ꯄꯦꯛꯇ ꯔꯦꯁꯤꯑꯣꯁꯤꯡꯁꯨ ꯑꯌꯥꯕꯥ ꯄꯤꯔꯤ .

ꯈꯨꯗꯝ

ꯑꯦꯝꯕꯦꯗ ꯑꯃꯍꯦꯛꯇꯕꯨ, ꯑꯃꯒꯨꯝꯅꯥ <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>

ꯑꯦꯁ꯭ꯄꯦꯛꯇ ꯔꯦꯁꯤꯑꯣꯁꯤꯡ꯫

ꯑꯦꯁ꯭ꯄꯦꯛꯇ ꯔꯦꯁꯤꯑꯣꯁꯤꯡ ꯑꯁꯤ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯔꯦꯁꯤꯑꯣ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯄꯤꯔꯤ:

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

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

ꯃꯁꯤꯒꯤ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯁꯤꯅꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯑꯦꯁ꯭ꯄꯦꯛꯇ ꯔꯦꯁꯤꯑꯣ ꯑꯁꯤ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯗꯥ ꯂꯥꯏꯍꯜꯂꯤ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯍꯧꯅꯕꯒꯤꯗꯃꯛ 4x3ꯅꯤ, ꯑꯗꯨꯕꯨ ꯃꯤꯗꯤꯌꯝ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯇꯥ ꯀꯁ꯭ꯇꯝ 2x1 ꯑꯃꯗꯥ ꯍꯣꯡꯏ꯫

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

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

ꯁꯥꯁ ꯃꯦꯞ꯫

ꯃꯅꯨꯡꯗꯥ _variables.scss, ꯅꯍꯥꯛꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯄꯥꯝꯂꯤꯕꯥ ꯑꯦꯁ꯭ꯄꯦꯛꯇ ꯔꯦꯁꯤꯑꯣꯁꯤꯡ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ꯫ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯗꯤꯐꯣꯜꯇ $ratio-aspect-ratiosꯃꯦꯞ ꯑꯁꯤ ꯌꯥꯑꯣꯔꯤ꯫ ꯅꯍꯥꯛꯅꯥ ꯄꯥꯝꯂꯤꯕꯃꯈꯩ ꯃꯦꯞ ꯑꯗꯨ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧ ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯕꯨ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯁꯥꯁ ꯑꯗꯨ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧ꯫

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