డెవలపర్‌లు ఇతర HTML మూలకాలకు సంబంధించి ఇమేజ్ యొక్క క్రమం మరియు కొలతలను నిర్ణయించడం ద్వారా స్పష్టమైన దృశ్య శ్రేణిని స్థాపించడానికి చిత్రం యొక్క స్థానాన్ని సెట్ చేస్తారు. చిత్రాన్ని వివిధ స్థానాల్లో ఉంచడం ద్వారా, వెబ్‌సైట్ రూపాన్ని మరియు అనుభూతిని మార్చగల ఆధునిక, ప్రత్యేకమైన మరియు అనుకూల డిజైన్‌లను కూడా రూపొందించవచ్చు. ఈ కథనం CSSని ఉపయోగించి చిత్రం యొక్క స్థానాన్ని సెట్ చేసే విధానాన్ని ప్రదర్శిస్తుంది.
CSSలో చిత్రం యొక్క స్థానాన్ని ఎలా సెట్ చేయాలి?
CSSలో చిత్రం యొక్క స్థానాన్ని సెట్ చేయడం ద్వారా, “ఇలాంటి ప్రయోజనాలు ఖచ్చితమైన ప్లేస్మెంట్ ',' అతివ్యాప్తి మూలకం 'మరియు' ప్రతిస్పందించే డిజైన్ ” సులభంగా సాధించవచ్చు. ఈ ప్రయోజనాలను ఉపయోగించి, డెవలపర్‌లు సులభంగా అనుకూలీకరించవచ్చు మరియు పూర్తిగా పనిచేసే మరియు ఆకర్షించే వెబ్‌సైట్‌ను రూపొందించవచ్చు. చిత్రం యొక్క స్థానాన్ని సెట్ చేయడానికి రెండు పద్ధతులు/గుణాలు ఉన్నాయి. ఈ లక్షణాలు క్రింద వివరించబడ్డాయి:
విధానం 1: ఫ్లోట్ ప్రాపర్టీని ఉపయోగించడం
ది ' తేలుతుంది 'లో HTML మూలకాల కదలిక కోసం CSS ద్వారా ఆస్తి అందించబడుతుంది వదిలేశారు 'లేదా' కుడి ” దిశ. HTML మూలకాల యొక్క ఖచ్చితమైన ప్లేస్మెంట్ కోసం ప్రతిస్పందించే లేఅవుట్‌ను సృష్టించేటప్పుడు ఇది ఎక్కువగా ఉపయోగించబడుతుంది.
ఉదాహరణకు, వెబ్‌పేజీకి ఎడమ మరియు కుడి వైపులా చిత్రాలను సమలేఖనం చేయడానికి “ఫ్లోట్” ప్రాపర్టీ ఉపయోగించబడుతుంది:
< div >
< img src = 'bg.jpg' ఎత్తు = '300px' వెడల్పు = '400px' తరగతి = 'స్థాన హక్కు' >
< img src = 'book.jpg' ఎత్తు = '300px' వెడల్పు = '400px' తరగతి = 'ఎడమ స్థానం' >
div >
పై కోడ్‌లో:
-
- మొదట, రూట్ ' div HTML మూలకాల కోసం కంటైనర్‌గా పనిచేసే మూలకం సృష్టించబడింది.
- తరువాత, రెండు '
'ట్యాగ్‌లు' లోపల ఉపయోగించబడతాయి
” ట్యాగ్.- ఆ తరువాత, విలువలు ' 300px 'మరియు' 400px 'కి అందించబడ్డాయి' ఎత్తు 'మరియు' వెడల్పు 'రెండింటి లక్షణాలు'
' టాగ్లు.
- అలాగే, '' యొక్క తరగతిని కేటాయించండి స్థానం కుడి 'మరియు' స్థానం ఎడమ ”వరుసగా మొదటి మరియు రెండవ “
” ట్యాగ్‌లకు.
ఇప్పుడు, 'ని నమోదు చేయండి <శైలి> కింది CSS లక్షణాలను వర్తింపజేయడానికి ”ట్యాగ్ చేయండి:
< శైలి >
.స్థానం కుడి {
ఫ్లోట్: కుడి;
}
.స్థానం ఎడమ {
ఫ్లోట్: ఎడమ;
}
శైలి >
వివరణ క్రింద ఇవ్వబడింది:
-
- ముందుగా, 'ని ఎంచుకోండి స్థానం కుడి 'తరగతి మరియు ' విలువను సెట్ చేయండి కుడి 'దాని నుండి' తేలుతుంది ”ఆస్తి. ఇది ఎంచుకున్న HTML మూలకాన్ని వెబ్‌పేజీలో సరైన దిశలో కదిలిస్తుంది.
- తరువాత, 'ని ఎంచుకోండి స్థానం ఎడమ 'తరగతి మరియు విలువను అందించండి' వదిలేశారు ' కు ' తేలుతుంది ”ఆస్తి. ఇది ఎలిమెంట్‌ను ఎడమ వైపుకు తరలించడానికి కదిలిస్తుంది.
సంకలన దశ ముగిసిన తర్వాత:
చిత్రాలు ఎడమ మరియు కుడి స్థానాలకు సెట్ చేయబడినట్లు అవుట్‌పుట్ చూపిస్తుంది.విధానం 2: ఆబ్జెక్ట్-పొజిషన్ ప్రాపర్టీని ఉపయోగించడం
ది ' వస్తువు-స్థానం ” ఆస్తి వెబ్‌పేజీలో ఒక నిర్దిష్ట స్థానంలో ఇమేజ్ లేదా HTML మూలకం యొక్క స్థానాన్ని నిర్ధారిస్తుంది. ఇది క్షితిజ సమాంతర మరియు నిలువు స్థానాలపై నియంత్రణను ఇస్తుంది, వినియోగదారు కోరుకున్న విజువల్ ఎఫెక్ట్ లేదా లేఅవుట్‌ను సాధించడానికి అనుమతిస్తుంది. ఇమేజ్ క్రాపింగ్, థంబ్‌నెయిల్‌లు, కస్టమ్ లేఅవుట్‌లు మొదలైన వాటి కోసం డెవలపర్‌లచే ఇది ఎక్కువగా ఉపయోగించబడుతుంది.
ఈ ఆస్తి సంఖ్యా మరియు కీవర్డ్ విలువలు రెండింటినీ తీసుకోవచ్చు. ఉదాహరణకు, సంఖ్యా మరియు కీవర్డ్ విలువలు రెండూ అందించబడ్డాయి “ వస్తువు-స్థానం ”ఆస్తి. ఇది క్రింది కోడ్ స్నిప్పెట్‌లో CSSలో చిత్రం యొక్క స్థానాన్ని సెట్ చేస్తుంది:
< శైలి >
.సంఖ్యావిలువలు
{
వస్తువు-స్థానం: 100px 20px;
}
.keywordValues
{
వస్తువు-స్థానం: ఎడమ;
}
శైలి >
< శరీరం >
< div >
< img src = 'book.jpg' ఎత్తు = '300px' వెడల్పు = '400px' తరగతి = 'కీలక విలువలు' >
< img src = 'bg.jpg' ఎత్తు = '300px' వెడల్పు = '400px' తరగతి = 'సంఖ్యా విలువలు' >
div >
శరీరం >
పై కోడ్ స్నిప్పెట్‌లో:-
- మొదట, ' సంఖ్యా విలువలు 'తరగతి' లోపల ఎంపిక చేయబడింది <శైలి> ” ట్యాగ్. మరియు సంఖ్యా విలువలు ' 100px 20px 'CSSకి అందించబడ్డాయి' వస్తువు-స్థానం ”ఆస్తి. ది ' 100px ” అనేది క్షితిజ సమాంతర దిశలో జోడించబడిన స్థలం మరియు “ 20px ” నిలువు కోసం.
- తరువాత, ' కీవర్డ్ విలువలు 'తరగతి ఎంచుకోబడింది మరియు కీవర్డ్ విలువ' వదిలేశారు 'కి అందించబడింది' వస్తువు-స్థానం ” చిత్రాన్ని ఎడమ వైపుకు సమలేఖనం చేసే లక్షణం.
- ఆ తరువాత, లోపల ' <బాడీ> ” ట్యాగ్ రెండు చిత్రాలు సృష్టించబడ్డాయి మరియు పైన సృష్టించబడిన తరగతులు వాటికి కేటాయించబడతాయి.
సంకలన దశ ముగిసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
చిత్రాలు ఇప్పుడు నిర్దిష్ట స్థానాలకు సెట్ చేయబడ్డాయి అని స్నాప్‌షాట్ వివరిస్తుంది.ముగింపు
చిత్రం యొక్క స్థానాన్ని CSS ఉపయోగించి సెట్ చేయవచ్చు ' తేలుతుంది 'మరియు' వస్తువు-స్థానం 'గుణాలు. ది ' తేలుతుంది ” ఆస్తి కీవర్డ్‌ని విలువగా తీసుకుంటుంది మరియు మూలకాన్ని ఎడమ లేదా కుడి స్థానాల్లోకి తరలిస్తుంది. మరోవైపు, ' వస్తువు-స్థానం ”, క్షితిజ సమాంతర మరియు నిలువు దిశలలో కీవర్డ్ మరియు సంఖ్యా విలువలు రెండింటినీ తీసుకుంటుంది. ఈ కథనం CSSలో చిత్రం యొక్క స్థానాన్ని సెట్ చేసే విధానాన్ని ప్రదర్శించింది.
- ఆ తరువాత, విలువలు ' 300px 'మరియు' 400px 'కి అందించబడ్డాయి' ఎత్తు 'మరియు' వెడల్పు 'రెండింటి లక్షణాలు'