लेख निर्देशिका
तेजी से बढ़ते मोबाइल इंटरनेट के कारण,WeChat विपणनमोबाइल फोन की लोकप्रियता बन गई हैजीवनआवश्यक उपकरण।
एक वेबसाइट बनाएंटेम्पलेट, इसका उपयोग करने की अनुशंसा की जाती हैWordPressके लिए अनुकूली विषय:
- यदि वर्डप्रेस थीम डेवलपर ने वर्डप्रेस थीम पेज को डिजाइन करते समय एचटीएमएल 5 छवि अनुकूली स्क्रीन को अच्छी तरह से नहीं बनाया है ...
- मोबाइल डिवाइस पर वेबसाइट ब्राउज़ करने पर, एक बहुत ही बदसूरत तस्वीर अव्यवस्था होगी, और उपयोगकर्ता का अनुभव बेहद खराब है!
CSS इमेज एडेप्टिव का क्या मतलब है?
CSS इमेज सेल्फ-एडेप्टेशन से तात्पर्य CSS कोड के माध्यम से HTML वेब पेज में इमेज बनाने से है:
- स्वचालित रूप से विभिन्न उपकरणों की चौड़ाई और ऊंचाई के अनुकूल।
- img टैग स्वचालित रूप से आनुपातिक रूप से बढ़ाया जाता है।
आगे,चेन वेइलियांगमैं आपके साथ CSS img आनुपातिक स्केलिंग कोड साझा करूँगा ^_^
सीएसएस छवि ऊंचाई और चौड़ाई अनुकूली कोड
एचटीएमएल में छवि डालें:
यदि आप चाहते हैं कि छवि चौड़ाई और ऊंचाई में स्थिर रहने के बजाय स्क्रीन के छोटे आकार के अनुकूल हो।
आप अपनी वर्डप्रेस थीम की 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％.
हालाँकि, यह नियम यहाँ लागू नहीं होता है।
- क्योंकि यह नियम इसे इसके कंटेनर जितना चौड़ा दिखाई देगा।
- ऐसे मामलों में जहां कंटेनर छवि की तुलना में बहुत बड़ा है, छवि को अनावश्यक रूप से बढ़ाया जाएगा।
注意 事项
सीएसएस चयनकर्ता क्या हैं? क्लास और आईडी में क्या अंतर है?निम्नलिखित ट्यूटोरियल . के बारे में बात करते हैं
मोबाइल वेबसाइट पेज के अनुकूल MP4 वीडियो कैसे चलाती है?कृपया नीचे दिए गए लिंक पर क्लिक करें
होप चेन वेइलियांग ब्लॉग ( https://www.chenweiliang.com/ ) साझा किया गया "वेब पेज एचटीएमएल 5 छवि अनुकूली स्क्रीन आईएमजी आनुपातिक स्केलिंग कोड", जो आपके लिए सहायक है।
इस लेख का लिंक साझा करने के लिए आपका स्वागत है:https://www.chenweiliang.com/cwl-964.html
नवीनतम अपडेट प्राप्त करने के लिए चेन वेइलियांग के ब्लॉग के टेलीग्राम चैनल में आपका स्वागत है!
📚 इस गाइड में बहुत महत्व है, 🌟यह एक दुर्लभ अवसर है, इसे न चूकें! ⏰⌛💨
अच्छा लगे तो शेयर और लाइक करें!
आपका साझा करना और पसंद करना हमारी निरंतर प्रेरणा है!