សមាមាត្រ
ប្រើធាតុ pseudo ដែលបានបង្កើតដើម្បីធ្វើឱ្យធាតុរក្សាសមាមាត្រនៃការជ្រើសរើសរបស់អ្នក។ ល្អឥតខ្ចោះសម្រាប់ការដោះស្រាយការដោះស្រាយការបង្កប់វីដេអូឬការបញ្ចាំងស្លាយដោយផ្អែកលើទទឹងរបស់មេ។
អំពី
ប្រើជំនួយការសមាមាត្រដើម្បីគ្រប់គ្រងសមាមាត្រនៃមាតិកាខាងក្រៅដូចជា <iframe>
s, <embed>
s, <video>
s និង <object>
s ។ ជំនួយទាំងនេះក៏អាចត្រូវបានប្រើនៅលើធាតុកូន HTML ស្តង់ដារណាមួយ (ឧទាហរណ៍ a <div>
ឬ <img>
) ។ រចនាប័ទ្មត្រូវបានអនុវត្តពី .ratio
ថ្នាក់មេដោយផ្ទាល់ទៅកុមារ។
សមាមាត្រត្រូវបានប្រកាសនៅក្នុងផែនទី Sass និងរួមបញ្ចូលនៅក្នុងថ្នាក់នីមួយៗតាមរយៈអថេរ CSS ដែលអនុញ្ញាតឱ្យ សមាមាត្រទិដ្ឋភាពផ្ទាល់ខ្លួន ផងដែរ។
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>
សមាមាត្រ
សមាមាត្រអាចត្រូវបានប្ដូរតាមបំណងជាមួយនឹងថ្នាក់កែប្រែ។ តាមលំនាំដើម ថ្នាក់សមាមាត្រខាងក្រោមត្រូវបានផ្តល់ជូន៖
<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>
អថេរ CSS នេះធ្វើឱ្យវាងាយស្រួលក្នុងការកែប្រែសមាមាត្រនៅទូទាំងចំណុចឈប់។ ខាងក្រោមគឺ 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>
ផែនទី 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%)
);