વેબપેજ HTML 5 માટે HTML XNUMX છબી અનુકૂલનશીલ સ્ક્રીન img પ્રમાણસર સ્કેલિંગ કોડ

તેજીવાળા મોબાઈલ ઈન્ટરનેટને કારણે,Wechat માર્કેટિંગમોબાઈલ ફોનની લોકપ્રિયતા બની ગઈ છેજીવનઆવશ્યક સાધન.

વેબસાઇટ બનાવોટેમ્પલેટ, તેનો ઉપયોગ કરવાની ભલામણ કરવામાં આવે છેવર્ડપ્રેસઆ માટે અનુકૂલનશીલ થીમ:

CSS ઇમેજ એડેપ્ટિવનો અર્થ શું થાય છે?

CSS ઇમેજ અનુકૂલનશીલ એટલે CSS કોડ દ્વારા html વેબ પેજમાં ઇમેજ બનાવવા માટે:

આગળ,ચેન વેઇલીંગહું તમારી સાથે CSS img પ્રમાણસર સ્કેલિંગ કોડ ^_^ શેર કરીશ

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 પસંદગીકારો શું છે? વર્ગ અને આઈડી વચ્ચે શું તફાવત છે?નીચેના ટ્યુટોરિયલ્સ ▼ વિશે વાત કરે છે

CSS પસંદગીકાર વર્ગ અને id વચ્ચે શું તફાવત છે? HTML માં id અને વર્ગનો ઉપયોગ

CSS પસંદગીકાર વર્ગ અને id વચ્ચે શું તફાવત છે? એચટીએમએલ ચેન વેઇલીંગમાં આઇડી અને ક્લાસનો ઉપયોગ હાલમાં એસઇઓ કરી રહ્યું છે અને વેબસાઇટની વર્ડપ્રેસ થીમને ઓપ્ટિમાઇઝ કરી રહ્યું છે.જો કે મેં પહેલા કેટલાક મૂળભૂત HTML અને CSS જ્ઞાન શીખ્યા છે, પરંતુ મેં તેને થોડા સમય માટે સંચાલિત કર્યું નથી, ખાસ કરીને CSS ભાગ...

મોબાઇલ વેબસાઇટ પર એમપી4 વિડિયો ચલાવવા માટે પૃષ્ઠને કેવી રીતે અનુકૂલિત કરવું?કૃપા કરીને નીચેની લિંક પર ક્લિક કરો ▼

H5 વેબપેજ MP4 પૃષ્ઠ સાથે કેવી રીતે અનુકૂલન કરે છે? મોબાઇલ વેબસાઇટ વિડિઓ HTML કોડ ચલાવે છે

વિડીયો માર્કેટીંગ એ ઓનલાઈન માર્કેટીંગનો એક અભિન્ન ભાગ છે: ઘણા ઓનલાઈન પ્રમોશન પ્રેક્ટિશનરો વારંવાર ટ્રાફિકને ચલાવવા માટે "વાઈરલ માર્કેટીંગ" સાથે વિડિયોનો ઉપયોગ કરે છે.જો WeChat માર્કેટિંગને વિડિયો માર્કેટિંગ સાથે જોડવામાં આવે, તો તે નવા મીડિયા અને સામાજિક ઈ-કોમર્સના કોપીરાઈટિંગ રૂપાંતરણ દરને વધુ સુધારી શકે છે.મારા ઘણા મિત્રો છે...