CSS ഉപയോഗിച്ച് പ്രതികരിക്കുന്ന ഡിസൈൻ ഇമേജുകൾ എങ്ങനെ ചേർക്കാം എന്ന് ഇതാ
ഇന്ന് പ്രചാരമുള്ള വെബ്സൈറ്റുകൾ നോക്കൂ, നിങ്ങൾ കാണുന്ന ഒരു ഡിസൈൻ ചികിത്സ വലിയ സ്ക്രീനിൽ സ്പാനിംഗ് പശ്ചാത്തല ഇമേജുകളാണ്. പ്രതികരിച്ച വെബ് ഡിസൈൻ എന്നറിയപ്പെടുന്ന ഒരു സമീപനം - വെബ്സൈറ്റുകൾ വ്യത്യസ്ത സ്ക്രീൻ വലിപ്പത്തിലും ഉപകരണങ്ങളിലും പ്രതികരിക്കേണ്ട മികച്ച പരിശീലനങ്ങളിൽ നിന്നും ഈ ഇമേജുകൾ ചേർക്കുന്ന വെല്ലുവിളികളിൽ ഒന്ന്.
നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ ലേഔട്ട് വ്യത്യസ്ത വലിപ്പത്തിലുള്ള വലിപ്പങ്ങളുള്ള മാറ്റങ്ങളും സ്കെയിലുകളും ആയതിനാൽ, ഈ പശ്ചാത്തല ഇമേജുകൾ അവയുടെ വലുപ്പത്തിന് അനുസൃതമായി പ്രവർത്തിക്കണം.
വാസ്തവത്തിൽ, ഈ "ദ്രാവക ഇമേജുകൾ" പ്രതികരിച്ച വെബ്സൈറ്റുകളുടെ (ഒരു ദ്രാവകം ഗ്രിഡ്, മീഡിയ ചോദ്യങ്ങൾക്കൊപ്പം) ഒരു പ്രധാന ഭാഗമാണ്. ആ മൂന്ന് കഷണങ്ങൾ തുടക്കത്തിൽ മുതൽ പ്രതികരണപരമായ വെബ് ഡിസൈൻ ചെയ്തിട്ടുണ്ട്, പക്ഷെ ഒരു സൈറ്റിലേക്ക് പ്രതികരിക്കുന്ന ഇൻലൈൻ ഇമേജുകൾ എല്ലായ്പ്പോഴും ചേർക്കുന്നത് വളരെ എളുപ്പമാണ് (ഇൻലൈൻ ഇമേജുകൾ ഗ്രാഫിക്സ് HTML മാർക്കപ്പിന്റെ ഭാഗമായി നൽകിയിരിക്കുന്നു), പശ്ചാത്തല ഇമേജുകളും (സി.എസ്.എസ് പശ്ചാത്തല പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് പേജിലേക്ക് ശൈലി രൂപപ്പെടുത്തിയത്) നിരവധി വെബ് ഡിസൈനർമാർക്കും ഫ്രണ്ട് എൻഡ് ഡെവലപ്പർമാർക്കും ഒരു വലിയ വെല്ലുവിളി നൽകിയിട്ടുണ്ട്. നന്ദി, ബിൽഡ് "background-size" പ്രോപ്പർട്ടി കൂട്ടിച്ചേർത്തത് ഇത് സാധ്യമാക്കി.
ഒരു പ്രത്യേക ലേഖനത്തിൽ, ഒരു വിൻഡോയിൽ അനുയോജ്യമായ രീതിയിൽ ഇമേജുകൾ നീക്കാൻ CSS3 സൈറ്റസ് പശ്ചാത്തല വലുപ്പത്തെ എങ്ങനെ ഉപയോഗിക്കണം എന്ന് ഞാൻ മറച്ചുവച്ചിട്ടുണ്ട്, എന്നാൽ ഈ പ്രോപ്പർട്ടിയ്ക്ക് കൂടുതൽ മികച്ചതും കൂടുതൽ ഉപയോഗപ്രദവുമായ മാർഗ്ഗം ഉണ്ട്. ഇത് ചെയ്യുന്നതിന്, ഞങ്ങൾ താഴെ പറയുന്ന പ്രോപ്പർട്ടി മൂല്യവും ഉപയോഗിക്കും:
പശ്ചാത്തല വലുപ്പം: കവർ;
ജാലകത്തിന് എത്ര വലിയതോ വലുതോ ചെറുതോ വലുതോ ആയ ജാലകത്തിലാണെങ്കിൽ, കവർ കീവേഡ് പ്രോപ്പർട്ടി വിൻഡോക്ക് സ്കെയിൽ ഇമേജ് സ്കെയിൽ ചെയ്യാൻ പറയുന്നു. ഇമേജ് മുഴുവൻ സ്ക്രീനിൽ ഉൾക്കൊള്ളിക്കാൻ സ്കെയിൽ ചെയ്തു, എന്നാൽ യഥാർത്ഥ അനുപാതങ്ങളും വീക്ഷണ അനുപാതവും മാറ്റമില്ലാതെ നിലനിർത്തുന്നു, ചിത്രത്തെ വികലമാക്കുന്നതിൽ നിന്നും തടയുന്നു.
ചിത്രം ജാലകം മുഴുവൻ മൂടിക്കെട്ടിയാൽ കഴിയുന്നത്രയും വലുതാണ് വിൻഡോ. നിങ്ങളുടെ പേജ് അല്ലെങ്കിൽ ചിത്രത്തിൽ എന്തെങ്കിലും വ്യതിചലനം ഉണ്ടാകാൻ പാടില്ല എന്നാണ് ഇതിനർത്ഥം, എന്നാൽ സ്ക്രീനിന്റെ അനുപാത അനുപാതത്തിലും സംശയാസ്പദമായ ഇമേജിനും അനുസരിച്ച് ചിത്രം ചിലത് ഉചിതമായിരിക്കുമെന്നാണ് ഇതിനർത്ഥം. ഉദാഹരണത്തിന്, പശ്ചാത്തല-സ്ഥാന ആസ്തിയ്ക്കായി നിങ്ങൾ ഉപയോഗപ്പെടുത്തുന്ന മൂല്യങ്ങളെ അടിസ്ഥാനമാക്കി ചിത്രത്തിലെ (മുകളിൽ, താഴെ, ഇടത് അല്ലെങ്കിൽ വലത്) ഒരു അരികുകൾ ഛേദിക്കപ്പെടാം. നിങ്ങൾ "മുകളിൽ ഇടത്തേക്കുള്ള" പശ്ചാത്തലം ഓറിയെങ്കിൽ, ചിത്രത്തിലെ ഏതെങ്കിലും അധികവും ചുവടെയും വലതുവശത്തും ഓഫാകും. നിങ്ങൾ പശ്ചാത്തല ഇമേജ് കേന്ദ്രീകരിച്ചിട്ടുണ്ടെങ്കിൽ, അധികഭാഗം എല്ലാ വശങ്ങളും പുറത്തെടുക്കും, എന്നാൽ അമിത വേഗത വ്യാപിച്ചതിനാൽ, ഏതെങ്കിലും ഒരു വശത്തെ ആഘാതം കുറവാണ്.
പശ്ചാത്തല വലുപ്പം എങ്ങിനെ ഉപയോഗിക്കാം: കവർ;
നിങ്ങളുടെ പശ്ചാത്തല ചിത്രം സൃഷ്ടിക്കുമ്പോൾ, വളരെ വലുതായ ഒരു ഇമേജ് സൃഷ്ടിക്കുന്നതാണ് നല്ലത്. ദൃശ്യപരതയിൽ ശ്രദ്ധേയമായ ഒരു പ്രതീതി ഇല്ലാതെ ബ്രൌസർമാർക്ക് ഒരു ഇമേജ് ചെറുതാക്കാം, ഒരു ബ്രൗസർ അതിന്റെ യഥാർത്ഥ അളവുകളേക്കാൾ വലുതായ ഒരു ഇമേജിനെ സ്കെയിൽ ചെയ്താൽ, ദൃശ്യത്തിന്റെ ഗുണനിലവാരം ദുർബലമാകുകയും മങ്ങിയ ബ്ളേറിലാകുകയും പിക്സൽ ചെയ്യപ്പെടുകയും ചെയ്യും. ഇതിലേക്ക് താഴേക്ക് നിങ്ങൾ എല്ലാ സ്ക്രീനുകളിലും വലിയ ഇമേജുകൾ ഡെലിവർ ചെയ്യുന്ന സമയത്ത് നിങ്ങളുടെ പേജ് ഒരു പ്രകടനം ഹിറ്റ് നടത്തുക എന്നതാണ്.
നിങ്ങൾ ഇതു ചെയ്യുമ്പോൾ , ഡൌൺലോഡ് വേഗതയ്ക്കും വെബ് ഡെലിവറിക്കുമായി ആ ചിത്രങ്ങൾ ശരിയായി തയ്യാറാക്കുന്നത് ഉറപ്പാക്കുക. ഒടുവിൽ, നിങ്ങൾക്കാവശ്യമായ വലുപ്പത്തിലുള്ള ഇമേജിന്റെ വലുപ്പവും ഗുണനിലവാരവും ഡൌൺലോഡ് വേഗതയ്ക്കായുള്ള ന്യായമായ ഫയൽ വലുപ്പത്തിനും ഇടയിൽ സന്തോഷമുള്ള മാധ്യമം കണ്ടെത്തേണ്ടതുണ്ട്.
സ്കെയ്ലിങ്ങ് പശ്ചാത്തല ഇമേജുകൾ ഉപയോഗിക്കുന്നതിനുള്ള ഒരു സാധാരണ രീതി, ആ ഇമേജ് മുഴുവൻ പേജിന്റെയും പശ്ചാത്തലത്തിൽ, ആ പേജിന്റെ വീതിയുള്ളതോ, ഡെസ്ക് ടോപ്പ് കമ്പ്യൂട്ടറിലോ അല്ലെങ്കിൽ വളരെ ചെറുതോ ആകട്ടെ, മൊബൈൽ, ഉപകരണങ്ങൾ.
നിങ്ങളുടെ വെബ് ഹോസ്റ്റിലേക്ക് നിങ്ങളുടെ ചിത്രം അപ്ലോഡുചെയ്ത് നിങ്ങളുടെ CSS ലേക്ക് ഒരു പശ്ചാത്തല ഇമേജായി ചേർക്കുക:
പശ്ചാത്തല-ഇമേജ്: url (fireworks-over-wdw.jpg);
പശ്ചാത്തലം-ആവർത്തിക്കുക: ആവർത്തിക്കില്ല;
പശ്ചാത്തല സ്ഥാനം: സെന്റർ സെന്റർ;
പശ്ചാത്തല അറ്റാച്ചുമെന്റ്: ഫിക്സഡ്;
ആദ്യം ബ്രൗസർ മുൻഗണനയുള്ള CSS ചേർക്കുക:
-വെബ്ബിറ്റ്-പശ്ചാത്തല വലുപ്പം: കവർ;
-moz-background-size: cover;
-o-background-size: cover;
എന്നിട്ട് CSS വസ്തു ചേർക്കുക:
പശ്ചാത്തല വലുപ്പം: കവർ;
വിവിധ ഉപകരണങ്ങളുമായി പൊരുത്തപ്പെടുന്ന വിവിധ ചിത്രങ്ങൾ ഉപയോഗിക്കുന്നു
ഒരു ഡെസ്ക്ടോപ്പ് അല്ലെങ്കിൽ ലാപ്ടോപ്പ് അനുഭവം പ്രതികരിക്കാൻ ഡിസൈൻ പ്രധാനമാണ്, വെബ് ആക്സസ് കഴിയുന്ന പലതരം ഉപകരണങ്ങൾ ഗണ്യമായി വളരുകയും, ഒരു വലിയ വൈവിധ്യമാർന്ന വലുപ്പത്തിൽ വരുന്നത്.
മുമ്പ് സൂചിപ്പിച്ചപോലെ ഒരു സ്മാർട്ട്ഫോണിൽ വളരെ വലിയ പ്രതികരിക്കുന്ന പശ്ചാത്തല ഇമേജ് ലോഡ് ചെയ്യുന്നു, ഉദാഹരണത്തിന്, കാര്യക്ഷമമായ അല്ലെങ്കിൽ ബാൻഡ്വിഡ്ത് ബോധപൂർവമായ രൂപകൽപ്പന അല്ല.
നിങ്ങൾ അവ ദൃശ്യമാകുത്തുന്ന ഉപകരണങ്ങൾക്ക് ഉചിതമായ ചിത്രങ്ങൾ നൽകുന്നതിന് മീഡിയ ചോദ്യങ്ങൾ എങ്ങനെ ഉപയോഗിക്കാമെന്നും, മൊബൈൽ ഉപകരണങ്ങളുമായി നിങ്ങളുടെ വെബ്സൈറ്റിന്റെ അനുയോജ്യത കൂടുതൽ മെച്ചപ്പെടുത്തുകയും ചെയ്യുക.
ജെന്നിഫയർ ക്രിരിൻ എഴുതിയ ലേഖനം എഡിറ്റു ചെയ്തത് ജെറമി ഗിർാർഡ് 9/12/17