រំលងទៅមាតិកាសំខាន់ រំលងទៅការរុករកឯកសារ
in English

សមាមាត្រ

ប្រើធាតុ 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%)
);