ప్రతిస్పందించే చిత్రం అనేది స్క్రీన్ పరిమాణాలతో సంబంధం లేకుండా వివిధ పరికరాలకు అనుగుణంగా మార్చుకోగలదు. వెబ్‌సైట్‌లో ప్రతిస్పందించే చిత్రాన్ని కలిగి ఉండటం ఈ రోజుల్లో చాలా కీలకంగా మారింది. ఇది వెబ్‌సైట్‌ను వేగవంతం చేయడమే కాకుండా అన్ని పరికరాల్లో చక్కని వినియోగదారు అనుభవాన్ని కూడా అందిస్తుంది. బ్రౌజర్ పరిమాణాన్ని మార్చడం ద్వారా ప్రతిస్పందించే చిత్రాలు కూడా పరిమాణం మార్చబడతాయి.
ప్రతిస్పందించే చిత్రాలు విభిన్న పరికరాలలో విభిన్న స్క్రీన్ పరిమాణాలకు సమర్ధవంతంగా అనుగుణంగా ఉంటాయి. ఇది నాణ్యత నిర్వహించబడుతుందని నిర్ధారిస్తుంది. ప్రతిస్పందించే చిత్రాలతో ప్రతిస్పందించే వెబ్‌సైట్ తప్పనిసరిగా నిశ్చితార్థం మరియు మార్పిడి రేట్లను పెంచుతుంది. మీడియా ప్రశ్నలతో పాటు CSSని ఉపయోగించి చిత్రాలను ప్రతిస్పందించేలా చేయవచ్చు.
చిత్రాలను ప్రతిస్పందించేలా చేయడానికి ఈ రైట్-అప్ HTML మరియు CSSని ఉపయోగిస్తుంది.
HTML మరియు CSSతో చిత్రాలను ప్రతిస్పందించేలా చేయడం ఎలా?
HTML మరియు CSSని ఉపయోగించి చిత్రాలను ప్రతిస్పందించేలా చేయడానికి, క్రింది దశలను అనుసరించండి:
- 'గరిష్ట-వెడల్పు' లక్షణాన్ని ఉపయోగించండి.
- 'వెడల్పు' లక్షణాన్ని ఉపయోగించండి.
- మీడియా ప్రశ్నలను వర్తింపజేయండి.
విధానం 1: 'గరిష్ట-వెడల్పు' లక్షణాన్ని ఉపయోగించండి
చిత్రాన్ని ప్రతిస్పందించేలా చేయడానికి మొదటి పద్ధతి “ గరిష్ట వెడల్పు ”ఆస్తి. ది ' గరిష్ట వెడల్పు చిత్రం యొక్క గరిష్ట వెడల్పును నిర్వచించడానికి ఆస్తి ఉపయోగించబడుతుంది. కంటెంట్ గరిష్ట వెడల్పును మించి ఉంటే, అది మూలకం యొక్క ఎత్తును మారుస్తుంది.
HTMLని సృష్టించండి
HTML యొక్క
ట్యాగ్‌లో ఇమేజ్ ఫైల్‌ను జోడించడానికి, వినియోగదారులుCSSని జోడించండి
ఇప్పుడు, ఒక బాహ్య CSS ఫైల్‌ని సృష్టించి, దానిని “తో సేవ్ చేయండి. css ” ఫైల్ పొడిగింపు, మరియు దానిని HTML ఫైల్ యొక్క
ట్యాగ్ లోపల లింక్ చేయండి. CSS ఫైల్‌లో ఇమేజ్ ఫైల్‌ను స్టైల్ చేయడానికి, img ట్యాగ్‌తో ప్రారంభించి, కర్లీ బ్రేస్‌లను తెరవండి. ఆపై, కర్లీ బ్రేస్ లోపల, “ని జోడించండి గరిష్ట వెడల్పు: 100% ;” కంటైనర్‌లో చిత్రాన్ని అడ్డంగా అమర్చడానికి. అంతేకాకుండా, ఇది చిత్రాలను కత్తిరించకుండా నిరోధిస్తుంది. ఆ తర్వాత, జోడించండి' ఎత్తు: ఆటో ;” ఎత్తును స్వయంచాలకంగా సర్దుబాటు చేయడానికి, చిత్రం సరిగ్గా ప్రదర్శించబడుతుంది:img {
గరిష్ట వెడల్పు : 100% ;
ఎత్తు : దానంతట అదే ;
}
ఇమేజ్ స్కేల్ ఎలా ఉందో తనిఖీ చేయడానికి బ్రౌజర్ విండో పరిమాణాన్ని మార్చండి.
విధానం 2: 'వెడల్పు' లక్షణాన్ని ఉపయోగించండి
చిత్రాన్ని ప్రతిస్పందించేలా చేయడానికి మరొక పద్ధతి ఆస్తిని ఉపయోగించడం ' వెడల్పు ”. ఆస్తి ' వెడల్పు ” చిత్రాలు మరియు టెక్స్ట్ కోసం వెడల్పును నిర్వచిస్తుంది. ఇందులో మార్జిన్‌లు, ప్యాడింగ్ లేదా బార్డర్‌లు లేవు. ఇది ఇమేజ్‌లు మరియు టెక్స్ట్ యొక్క పరిమాణాన్ని cm, px లేదా % రూపంలో సెట్ చేయగలదు. చిత్రాన్ని ప్రతిస్పందించేలా చేయడానికి, కేవలం “ని కేటాయించండి వెడల్పు 'ఆస్తి' 100 %'. అమరిక ' వెడల్పు: 100% ;” అంటే చిత్రాన్ని మాతృ మూలకం వలె పెద్దదిగా చేయడం:
img {వెడల్పు : 100% ;
ఎత్తు : దానంతట అదే ; }
పైన పేర్కొన్నది చిత్రం ప్రతిస్పందిస్తుందని నిర్ధారిస్తుంది. ఇది ప్రతిస్పందిస్తుందో లేదో తనిఖీ చేయడానికి, బ్రౌజర్ విండో పరిమాణాన్ని మార్చండి.
విధానం 3: మీడియా ప్రశ్నలను వర్తింపజేయండి
CSS మీడియా ప్రశ్నలు వెబ్ పేజీ రూపాన్ని సవరించడానికి వినియోగదారులకు సహాయపడతాయి. CSS మీడియా ప్రశ్న షరతులను కలిగి ఉంటుంది, ఈ షరతులు కలిసినప్పుడు, అది పరికరం లేదా బ్రౌజర్ రూపాన్ని మారుస్తుంది. మీడియా ప్రశ్నలు కూడా చిత్రాలను ప్రతిస్పందించేలా చేయడంలో వినియోగదారులకు సహాయపడతాయి. ఆ కారణంగా, ముందుగా, “@ని పేర్కొనండి మీడియా 'ట్యాగ్ చేసి, ఆపై 'ని పేర్కొనండి గరిష్ట వెడల్పు ” ప్రాపర్టీ మరియు కలుపుల లోపల ఇమేజ్ కోసం గరిష్ట వెడల్పును కేటాయించండి. ఎప్పుడైతే ఈ షరతు నెరవేరుతుందో ఆ చిత్రం ప్రతిస్పందిస్తుంది. ఆ తర్వాత, కర్లీ బ్రేస్‌లను జోడించి img ట్యాగ్‌ని పేర్కొనండి మరియు “ని పేర్కొనండి వెడల్పు: 100% ;” విలువ:
@మీడియా ( గరిష్ట వెడల్పు : 480px ) {img {
వెడల్పు : 100% ;
}
}
గమనిక : చిత్రం పేర్కొన్న షరతుకు అనుగుణంగా ఉంటే మాత్రమే ప్రతిస్పందిస్తుంది.
CSS మీడియా ప్రశ్న వర్తింపజేయబడింది మరియు ఇప్పుడు చిత్రం పేర్కొన్న చిత్ర పరిమాణానికి పరిమాణాన్ని మార్చినట్లయితే ప్రతిస్పందించేలా ప్రవర్తిస్తుంది. లేకపోతే, ఇది ప్రతిస్పందించదు:
ముగింపు
HTML మరియు CSSతో చిత్రాలను ప్రతిస్పందించేలా చేయడానికి, వినియోగదారులు వివిధ పద్ధతులను కలిగి ఉంటారు. ఈ పద్ధతులలో చిత్రాలను ప్రతిస్పందించేలా చేయడం ' గరిష్ట వెడల్పు 'ఆస్తి,' వెడల్పు ” ఆస్తి, మరియు CSS మీడియా ప్రశ్నను వర్తింపజేయడం ద్వారా కూడా. ఈ కథనం వినియోగదారులకు చిత్రాలను ప్రతిస్పందించేలా చేయడానికి పూర్తి పరిష్కారాన్ని అందించింది.