ఆర్టికల్ డైరెక్టరీ
విజృంభిస్తున్న మొబైల్ ఇంటర్నెట్ కారణంగా,Wechat మార్కెటింగ్మొబైల్ ఫోన్‌లకు ఆదరణ పెరిగిందిలైఫ్తప్పనిసరిగా కలిగి ఉన్న సాధనం.
స్టేషన్‌ను నిర్మించండిటెంప్లేట్, ఇది ఉపయోగించడానికి మద్దతిస్తుందిWordPressదీని కోసం అనుకూల థీమ్:
- WordPress థీమ్ పేజీని డిజైన్ చేసేటప్పుడు WordPress థీమ్ డెవలపర్ HTML 5 ఇమేజ్ అడాప్టివ్ స్క్రీన్‌ని బాగా తయారు చేయకపోతే...
- మొబైల్ పరికరంలో వెబ్‌సైట్‌ను బ్రౌజ్ చేస్తున్నప్పుడు, చాలా అగ్లీ పిక్చర్ తప్పుగా అమర్చబడుతుంది మరియు వినియోగదారు అనుభవం చాలా తక్కువగా ఉంది!
CSS ఇమేజ్ అడాప్టివ్ అంటే ఏమిటి?
CSS ఇమేజ్ అడాప్టివ్ అంటే html వెబ్ పేజీలో CSS కోడ్ ద్వారా చిత్రాలను తయారు చేయడం:
- వివిధ పరికరాల వెడల్పు మరియు ఎత్తుకు స్వయంచాలకంగా స్వీకరించండి.
- img ట్యాగ్ స్వయంచాలకంగా దామాషా ప్రకారం స్కేల్ చేయబడుతుంది.
తరువాత,చెన్ వీలియాంగ్నేను మీతో 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" సాధారణ css కోడ్‌కి జోడించబడింది, IE బ్రౌజర్ మాత్రమే దానిని గుర్తించగలదు, ఇతర బ్రౌజర్‌లు ఈ ప్రకటనను విస్మరిస్తాయి.
- ఇది బ్రౌజర్ భేదాన్ని సాధిస్తుంది, అనుకూల బ్రౌజర్‌ల ప్రయోజనాన్ని అనుమతిస్తుంది.
వెడల్పు ఎందుకు ఉపయోగించకూడదు: 100%?
చిత్రాల ఆటోమేటిక్ స్కేలింగ్‌ను సాధించడానికి, మీరు సాధారణంగా ఉపయోగించే వెడల్పు లక్షణాలను కూడా ఉపయోగించవచ్చు, ఉదా.width：100％.
అయితే, ఈ నియమం ఇక్కడ వర్తించదు.
- ఎందుకంటే ఈ నియమం దాని కంటైనర్ వలె వెడల్పుగా కనిపించేలా చేస్తుంది.
- కంటైనర్ చిత్రం కంటే చాలా వెడల్పుగా ఉన్న సందర్భాల్లో, చిత్రం అనవసరంగా విస్తరించబడుతుంది.
జాగ్రత్తలు
CSS సెలెక్టర్లు అంటే ఏమిటి? క్లాస్ మరియు ఐడి మధ్య తేడా ఏమిటి?క్రింది ట్యుటోరియల్స్ ▼ గురించి మాట్లాడతాయి
మొబైల్ వెబ్‌సైట్ MP4 వీడియోని పేజీకి అనుకూలంగా ఎలా ప్లే చేస్తుంది?దయచేసి దిగువ లింక్‌ను క్లిక్ చేయండి ▼
హోప్ చెన్ వీలియాంగ్ బ్లాగ్ ( https://www.chenweiliang.com/ ) "వెబ్ పేజీ HTML 5 ఇమేజ్ అడాప్టివ్ స్క్రీన్ img అనుపాత స్కేలింగ్ కోడ్" భాగస్వామ్యం చేయబడింది, ఇది మీకు సహాయకరంగా ఉంటుంది.
ఈ కథనం యొక్క లింక్‌ను భాగస్వామ్యం చేయడానికి స్వాగతం:https://www.chenweiliang.com/cwl-964.html
తాజా నవీకరణలను పొందడానికి చెన్ వీలియాంగ్ బ్లాగ్ యొక్క టెలిగ్రామ్ ఛానెల్‌కు స్వాగతం!
📚 ఈ గైడ్‌లో భారీ విలువ ఉంది, 🌟ఇది ఒక అరుదైన అవకాశం, దీన్ని మిస్ చేయకండి! ⏰⌛💨
నచ్చితే లైక్ చేసి షేర్ చేయండి!
మీ భాగస్వామ్యం మరియు ఇష్టాలు మా నిరంతర ప్రేరణ!