लेख निर्देशिका
वाढत्या मोबाईल इंटरनेटमुळे,Wechat विपणनमोबाईल फोनची लोकप्रियता झाली आहेजीवनआवश्यक साधन.
स्टेशन तयार कराटेम्पलेट, वापरण्याची शिफारस केली जातेवर्डप्रेसयासाठी अनुकूली थीम:
- वर्डप्रेस थीम पेज डिझाइन करताना वर्डप्रेस थीम डेव्हलपरने एचटीएमएल 5 इमेज अॅडॉप्टिव्ह स्क्रीन चांगली बनवली नसेल तर...
- मोबाईल डिव्हाइसवर वेबसाइट ब्राउझ केल्यास, अतिशय कुरूप चित्र डिस्लोकेशन होईल आणि वापरकर्ता अनुभव खूपच खराब आहे!
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 हा हॅक सीएसएस लिहिण्याचा एक मार्ग आहे.
- अशा प्रकारे, सामान्य css कोडमध्ये "\9" जोडला जातो, फक्त IE ब्राउझर ते ओळखू शकतो, इतर ब्राउझर या विधानाकडे दुर्लक्ष करतील.
- हे ब्राउझर भेद साध्य करेल, सुसंगत ब्राउझरचा उद्देश सक्षम करेल.
रुंदी का वापरत नाही: 100%?
प्रतिमांचे स्वयंचलित स्केलिंग साध्य करण्यासाठी, आपण अधिक सामान्यपणे वापरल्या जाणार्या रुंदीचे गुणधर्म देखील वापरू शकता, उदा.width：100％.
मात्र, हा नियम येथे लागू होत नाही.
- कारण या नियमामुळे तो त्याच्या डब्याइतका रुंद दिसेल.
- कंटेनर प्रतिमेपेक्षा जास्त विस्तीर्ण असलेल्या प्रकरणांमध्ये, प्रतिमा अनावश्यकपणे ताणली जाईल.
खबरदारी
CSS निवडक काय आहेत? वर्ग आणि आयडी मध्ये काय फरक आहे?खालील ट्यूटोरियल ▼ बद्दल बोलतात
मोबाइल वेबसाइट पेजवर अनुकूल MP4 व्हिडिओ कशी प्ले करते?कृपया खालील लिंकवर क्लिक करा ▼
होप चेन वेइलांग ब्लॉग ( https://www.chenweiliang.com/ ) "वेब पृष्ठ HTML 5 प्रतिमा अनुकूली स्क्रीन img आनुपातिक स्केलिंग कोड" सामायिक केला आहे, जो आपल्यासाठी उपयुक्त आहे.
या लेखाची लिंक सामायिक करण्यासाठी आपले स्वागत आहे:https://www.chenweiliang.com/cwl-964.html