പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്‌സ് നാവിഗേഷനിലേക്ക് പോകുക
in English

അനുപാതങ്ങൾ

നിങ്ങൾ തിരഞ്ഞെടുക്കുന്നതിന്റെ വീക്ഷണാനുപാതം നിലനിർത്താൻ ഒരു ഘടകത്തെ സൃഷ്ടിക്കാൻ ജനറേറ്റഡ് കപട ഘടകങ്ങൾ ഉപയോഗിക്കുക. രക്ഷിതാവിന്റെ വീതിയെ അടിസ്ഥാനമാക്കിയുള്ള വീഡിയോ അല്ലെങ്കിൽ സ്ലൈഡ്‌ഷോ ഉൾച്ചേർക്കലുകൾ പ്രതികരണാത്മകമായി കൈകാര്യം ചെയ്യുന്നതിന് അനുയോജ്യമാണ്.

കുറിച്ച്

<iframe>s, <embed>s, <video>s , s എന്നിവ പോലുള്ള ബാഹ്യ ഉള്ളടക്കത്തിന്റെ വീക്ഷണ അനുപാതങ്ങൾ നിയന്ത്രിക്കാൻ അനുപാത സഹായി ഉപയോഗിക്കുക <object>. <div>ഏതെങ്കിലും സ്റ്റാൻഡേർഡ് HTML ചൈൽഡ് എലമെന്റിലും (ഉദാ, a അല്ലെങ്കിൽ <img>) ഈ സഹായികളെ ഉപയോഗിക്കാനാകും . .ratioപാരന്റ് ക്ലാസിൽ നിന്ന് നേരിട്ട് കുട്ടിയിലേക്ക് ശൈലികൾ പ്രയോഗിക്കുന്നു .

വീക്ഷണ അനുപാതങ്ങൾ ഒരു സാസ് മാപ്പിൽ പ്രഖ്യാപിക്കുകയും ഓരോ ക്ലാസിലും CSS വേരിയബിൾ വഴി ഉൾപ്പെടുത്തുകയും ചെയ്യുന്നു, ഇത് ഇഷ്‌ടാനുസൃത വീക്ഷണാനുപാതങ്ങളും അനുവദിക്കുന്നു .

പ്രോ-ടിപ്പ്! റീബൂട്ടിൽ നിങ്ങൾക്കായി ഞങ്ങൾ അത് അസാധുവാക്കുന്നതിനാൽ frameborder="0"നിങ്ങളുടെ സെയിൽ ആവശ്യമില്ല . <iframe>

ഉദാഹരണം

ഒരു പോലെയുള്ള ഏതെങ്കിലും ഉൾച്ചേർക്കൽ <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
21x9
<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>

സാസ് മാപ്പ്

എന്നതിനുള്ളിൽ _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%)
);