લેખ ડિરેક્ટરી
મોબાઇલ ઇન્ટરનેટના તેજીમય વિકાસ અને WeChat માર્કેટિંગના વ્યાપક ઉપયોગ સાથે, મોબાઇલ ફોન જીવનમાં એક આવશ્યક સાધન બની ગયા છે .
વેબસાઇટ ટેમ્પ્લેટ્સ માટે, અમે WordPress રિસ્પોન્સિવ થીમ્સનો ઉપયોગ કરવાની ભલામણ કરીએ છીએ:
- જો વર્ડપ્રેસ થીમ પેજ ડિઝાઇન કરતી વખતે વર્ડપ્રેસ થીમ ડેવલપરે HTML 5 ઇમેજને અનુકૂલનશીલ સ્ક્રીન સારી રીતે બનાવી ન હોય તો...
- મોબાઇલ ઉપકરણ પર વેબસાઇટ બ્રાઉઝ કરતી વખતે, એક ખૂબ જ નીચ ચિત્ર ખોટી ગોઠવણી હશે, અને વપરાશકર્તા અનુભવ અત્યંત નબળો છે!
CSS ઇમેજ એડેપ્ટિવનો અર્થ શું થાય છે?
CSS ઇમેજ અનુકૂલનશીલ એટલે CSS કોડ દ્વારા html વેબ પેજમાં ઇમેજ બનાવવા માટે:
- વિવિધ ઉપકરણોની પહોળાઈ અને ઊંચાઈને આપમેળે અનુકૂલિત કરો.
- img ટેગ આપોઆપ પ્રમાણસર માપવામાં આવે છે.
આગળ, ચેન વેઇલિયાંગ તમારી સાથે છબીના કદને પ્રમાણસર રીતે માપવા માટેનો CSS કોડ શેર કરશે. ^_^
CSS છબી ઊંચાઈ અને પહોળાઈ અનુકૂલનશીલ કોડ
html માં છબી દાખલ કરો:
જો તમે ઈચ્છો છો કે ઈમેજ પહોળાઈ અને ઊંચાઈમાં સ્થિર રહેવાને બદલે સ્ક્રીનના નાના કદને અનુરૂપ બને.
તમે તમારી WordPress થીમ ▼ ની style.css ફાઇલમાં નીચેનો કોડ ઉમેરી શકો છો
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }અહીં નિવેદનmax-widthમહત્તમ પહોળાઈનો નિયમ
- ખાતરી કરવા માટે કે બધી છબીઓ મહત્તમ 100% પર પ્રદર્શિત થાય છે (એટલે કે તે ફક્ત તેમની પોતાની છબીઓ જેટલી મોટી પ્રદર્શિત થઈ શકે છે).
- આ સમયે, જો ઇમેજ ધરાવતું તત્વ (ઉદાહરણ તરીકે, ઇમેજ ધરાવતું બોડી અથવા ડિવ) ઇમેજની અંતર્ગત પહોળાઈ કરતાં નાનું હોય, તો મહત્તમ ઉપલબ્ધ જગ્યા ભરવા માટે ઇમેજને માપવામાં આવશે.
width:auto;એટલે આપોઆપ પહોળાઈ
\9 તે હેક સીએસએસ લખવાની એક રીત છે.
- આ રીતે, સામાન્ય CSS કોડમાં "\9" ઉમેરવામાં આવે છે, માત્ર IE બ્રાઉઝર તેને ઓળખી શકે છે, અન્ય બ્રાઉઝર આ નિવેદનને અવગણશે.
- આ સુસંગત બ્રાઉઝર્સના હેતુને સક્ષમ કરીને, બ્રાઉઝર ભિન્નતા પ્રાપ્ત કરશે.
શા માટે પહોળાઈનો ઉપયોગ કરશો નહીં: 100%?
છબીઓનું સ્વચાલિત સ્કેલિંગ પ્રાપ્ત કરવા માટે, તમે વધુ સામાન્ય રીતે ઉપયોગમાં લેવાતી પહોળાઈ ગુણધર્મોનો પણ ઉપયોગ કરી શકો છો, દા.ત.width：100％.
જો કે, આ નિયમ અહીં લાગુ પડતો નથી.
- કારણ કે આ નિયમથી તે તેના કન્ટેનર જેટલું પહોળું દેખાશે.
- એવા કિસ્સાઓમાં કે જ્યાં કન્ટેનર ઇમેજ કરતાં વધુ પહોળું છે, છબીને બિનજરૂરી રીતે ખેંચવામાં આવશે.
સાવચેતી
CSS પસંદગીકારો શું છે? વર્ગ અને આઈડી વચ્ચે શું તફાવત છે?નીચેના ટ્યુટોરિયલ્સ ▼ વિશે વાત કરે છે
મોબાઇલ વેબસાઇટ પર એમપી4 વિડિયો ચલાવવા માટે પૃષ્ઠને કેવી રીતે અનુકૂલિત કરવું?કૃપા કરીને નીચેની લિંક પર ક્લિક કરો ▼
આશા છે કે, ચેન વેઇલિયાંગના બ્લોગ ( https://www.chenweiliang.com/ ) પર શેર કરાયેલ "HTML 5 ઇમેજ રિસાઇઝિંગ કોડ ફોર એડેપ્ટિંગ ટુ સ્ક્રીન સાઈઝ એન્ડ પ્રોપોર્શનલ સાઈઝ ઇન વેબ પેજીસ" લેખ તમારા માટે મદદરૂપ થશે.
આ લેખની લિંક શેર કરવા માટે નિઃસંકોચ રહો: https://www.chenweiliang.com/cwl-964.html