അനുപാതങ്ങൾ

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

ഈ പേജിൽ

കുറിച്ച്

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

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

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

ഉദാഹരണം

ഒരു പോലെയുള്ള ഏതെങ്കിലും ഉൾച്ചേർക്കൽ <iframe>ഒരു പാരന്റ് എലമെന്റിലും .ratioവീക്ഷണാനുപാത ക്ലാസിലും പൊതിയുക. ഞങ്ങളുടെ സാർവത്രിക സെലക്‌ടറിന് നന്ദി, ഉടനടി ചൈൽഡ് എലമെന്റ് സ്വയമേവ വലുപ്പമുള്ളതാണ് .ratio > *.

html

<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

html

<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

html

<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

html

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