សមាមាត្រ

ប្រើធាតុ pseudo ដែលបានបង្កើតដើម្បីធ្វើឱ្យធាតុរក្សាសមាមាត្រនៃការជ្រើសរើសរបស់អ្នក។ ល្អឥតខ្ចោះសម្រាប់ការដោះស្រាយការដោះស្រាយការបង្កប់វីដេអូឬការបញ្ចាំងស្លាយដោយផ្អែកលើទទឹងរបស់មេ។

នៅលើទំព័រនេះ។

អំពី

ប្រើជំនួយការសមាមាត្រដើម្បីគ្រប់គ្រងសមាមាត្រនៃមាតិកាខាងក្រៅដូចជា <iframe>s, <embed>s, <video>s និង <object>s ។ ជំនួយទាំងនេះក៏អាចត្រូវបានប្រើនៅលើធាតុកូន HTML ស្តង់ដារណាមួយ (ឧទាហរណ៍ a <div>ឬ <img>) ។ រចនាប័ទ្មត្រូវបានអនុវត្តពី .ratioថ្នាក់មេដោយផ្ទាល់ទៅកុមារ។

សមាមាត្រត្រូវបានប្រកាសនៅក្នុងផែនទី Sass និងរួមបញ្ចូលនៅក្នុងថ្នាក់នីមួយៗតាមរយៈអថេរ CSS ដែលអនុញ្ញាតឱ្យ សមាមាត្រទិដ្ឋភាពផ្ទាល់ខ្លួន ផងដែរ។

Pro-Tip! អ្នកមិនត្រូវការ frameborder="0"នៅលើរបស់អ្នកទេ <iframe>ដោយសារយើងបដិសេធវាសម្រាប់អ្នកនៅក្នុង Reboot ។

ឧទាហរណ៍

រុំការបង្កប់ណាមួយដូចជា<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

4x3

16x9

២១x៩

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

2x1

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

4x3 បន្ទាប់មក 2x1

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