അനുപാതങ്ങൾ
നിങ്ങൾ തിരഞ്ഞെടുക്കുന്നതിന്റെ വീക്ഷണാനുപാതം നിലനിർത്താൻ ഒരു ഘടകത്തെ സൃഷ്ടിക്കാൻ ജനറേറ്റഡ് കപട ഘടകങ്ങൾ ഉപയോഗിക്കുക. രക്ഷിതാവിന്റെ വീതിയെ അടിസ്ഥാനമാക്കിയുള്ള വീഡിയോ അല്ലെങ്കിൽ സ്ലൈഡ്ഷോ ഉൾച്ചേർക്കലുകൾ പ്രതികരണാത്മകമായി കൈകാര്യം ചെയ്യുന്നതിന് അനുയോജ്യമാണ്.
കുറിച്ച്
<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>
വീക്ഷണ അനുപാതങ്ങൾ
മോഡിഫയർ ക്ലാസുകൾ ഉപയോഗിച്ച് വീക്ഷണ അനുപാതങ്ങൾ ഇഷ്ടാനുസൃതമാക്കാവുന്നതാണ്. സ്ഥിരസ്ഥിതിയായി ഇനിപ്പറയുന്ന അനുപാത ക്ലാസുകൾ നൽകിയിരിക്കുന്നു:
<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>
സാസ് മാപ്പ്
എന്നതിനുള്ളിൽ _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%)
);