लेख निर्देशिका
बढ्दो मोबाइल इन्टरनेटका कारण,WeChat मार्केटिंगमोबाइल फोनको लोकप्रियता बढेको छजीवनआवश्यक उपकरण।
स्टेशन बनाउनुहोस्टेम्प्लेट, यो प्रयोग गर्न सिफारिस गरिएको छWordPressको लागि अनुकूली विषयवस्तु:
- यदि WordPress विषयवस्तु विकासकर्ताले WordPress विषयवस्तु पृष्ठ डिजाइन गर्दा एचटीएमएल 5 छवि अनुकूली स्क्रिन राम्रोसँग बनाउन सकेन भने ...
- एक मोबाइल उपकरणमा वेबसाइट ब्राउज गर्दा, त्यहाँ एक धेरै कुरूप तस्वीर misalignment हुनेछ, र प्रयोगकर्ता अनुभव अत्यन्तै खराब छ!
CSS छवि अनुकूली भनेको के हो?
CSS छवि अनुकूली भनेको CSS कोड मार्फत html वेब पृष्ठमा छविहरू बनाउनु हो:
- विभिन्न यन्त्रहरूको चौडाइ र उचाइमा स्वचालित रूपमा अनुकूलन गर्नुहोस्।
- img ट्याग स्वचालित रूपमा समानुपातिक मापन गरिएको छ।
अर्को,चेन वेइलाङम तपाईसँग CSS img समानुपातिक स्केलिंग कोड साझा गर्नेछु ^_^
CSS छवि उचाइ र चौडाइ अनुकूली कोड
html मा छवि घुसाउनुहोस्:
यदि तपाईं छविलाई चौडाइ र उचाइमा स्थिर रहनुको सट्टा स्क्रिनको सानो आकारमा अनुकूलन गर्न चाहनुहुन्छ भने।
तपाइँ तपाइँको WordPress विषयवस्तु को style.css फाइलमा निम्न कोड थप्न सक्नुहुन्छ ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }कथन यहाँmax-widthअधिकतम चौडाइ नियम
- सबै छविहरू अधिकतम 100% मा प्रदर्शित छन् भनेर सुनिश्चित गर्न (अर्थात् तिनीहरू केवल तिनीहरूको आफ्नै छविहरू जत्तिकै ठूलो प्रदर्शन गर्न सकिन्छ)।
- यस बिन्दुमा, यदि छवि समावेश गरिएको तत्व (उदाहरणका लागि, छवि समावेश गरिएको शरीर वा div) छविको अन्तर्निहित चौडाइ भन्दा सानो छ भने, छवि अधिकतम उपलब्ध ठाउँ भर्न मापन गरिनेछ।
width:auto;मतलब स्वचालित चौडाई
\9 यो ह्याक सीएसएस लेख्ने तरिका हो।
- यसरी, "\9" सामान्य css कोडमा थपिएको छ, केवल IE ब्राउजरले यसलाई चिन्न सक्छ, अन्य ब्राउजरहरूले यो कथनलाई बेवास्ता गर्नेछन्।
- यसले ब्राउजर भिन्नता हासिल गर्नेछ, उपयुक्त ब्राउजरहरूको उद्देश्य सक्षम पार्दै।
किन चौडाइ प्रयोग नगर्ने: 100%?
तस्बिरहरूको स्वचालित स्केलिंग प्राप्त गर्नको लागि, तपाइँ अधिक सामान्य रूपमा प्रयोग हुने चौडाइ गुणहरू पनि प्रयोग गर्न सक्नुहुन्छ, उदाहरणका लागि।width：100％।
तर, यो नियम यहाँ लागू हुँदैन।
- किनभने यो नियमले यसलाई यसको कन्टेनर जस्तै चौडा देखाउनेछ।
- कन्टेनर छवि भन्दा धेरै चौडा भएको अवस्थामा, छवि अनावश्यक रूपमा फैलिनेछ।
सावधानी
CSS चयनकर्ताहरू के हुन्? वर्ग र आईडी बीच के भिन्नता छ?निम्न ट्यूटोरियलहरूले ▼ बारे कुरा गर्छ
मोबाइल वेबसाइटले पृष्ठमा अनुकूली MP4 भिडियो कसरी प्ले गर्छ?कृपया तलको लिङ्कमा क्लिक गर्नुहोस् ▼
आशा चेन वेइलियाङ ब्लग ( https://www.chenweiliang.com/ ) "वेब पृष्ठ HTML 5 छवि अनुकूली स्क्रिन img समानुपातिक स्केलिंग कोड" साझा गर्नुभयो, जुन तपाईलाई उपयोगी छ।
यस लेखको लिङ्क साझा गर्न स्वागत छ:https://www.chenweiliang.com/cwl-964.html
नवीनतम अपडेटहरू प्राप्त गर्न चेन वेइलियाङको ब्लगको टेलिग्राम च्यानलमा स्वागत छ!
📚 यो गाइडले ठूलो मूल्य समावेश गर्दछ, 🌟यो दुर्लभ अवसर हो, यसलाई नछुटाउनुहोस्! ⏰⌛💨
मन परे लाइक र सेयर गर्नुहोस !
तपाइँको साझा र लाइक हाम्रो निरन्तर प्रेरणा हो!