डेवलपर्स अन्य HTML तत्वों के सापेक्ष छवि के क्रम और आयामों को निर्धारित करके एक स्पष्ट दृश्य पदानुक्रम स्थापित करने के लिए एक छवि की स्थिति निर्धारित करते हैं। छवि को विभिन्न स्थितियों में रखकर, आधुनिक, अद्वितीय और कस्टम डिज़ाइन भी उत्पन्न किए जा सकते हैं जो वेबसाइट के स्वरूप और अनुभव को बदल सकते हैं। यह आलेख CSS का उपयोग करके छवि की स्थिति निर्धारित करने की प्रक्रिया को प्रदर्शित करता है।
CSS में इमेज की पोजीशन कैसे सेट करें?
CSS में एक छवि की स्थिति निर्धारित करने से, 'जैसे लाभ' सटीक प्लेसमेंट ”, “ अतिव्यापी तत्व ' और ' उत्तरदायी आकार 'आसानी से प्राप्त किया जा सकता है। इन लाभों का उपयोग करके, डेवलपर आसानी से पूरी तरह कार्यात्मक और आकर्षक वेबसाइट को अनुकूलित और बना सकते हैं। ऐसी दो विधियाँ/गुण हैं जिनके द्वारा किसी छवि की स्थिति निर्धारित की जा सकती है। इन गुणों का वर्णन नीचे किया गया है:
विधि 1: फ्लोट संपत्ति का उपयोग करना
' तैरना 'संपत्ति HTML तत्वों के आंदोलन के लिए सीएसएस द्वारा प्रदान की जाती है' बाएं ' या ' सही ' दिशा। HTML तत्वों के सटीक प्लेसमेंट के लिए उत्तरदायी लेआउट बनाते समय इसका अधिकतर उपयोग किया जाता है।
उदाहरण के लिए, 'फ्लोट' संपत्ति का उपयोग वेबपेज के बाएँ और दाएँ दोनों ओर छवियों को संरेखित करने के लिए किया जाता है:
< डिव >
< आईएमजी स्रोत = 'बीजी.जेपीजी' ऊंचाई = '300 पीएक्स' चौड़ाई = '400 पीएक्स' कक्षा = 'स्थिति सही' >
< आईएमजी स्रोत = 'book.jpg' ऊंचाई = '300 पीएक्स' चौड़ाई = '400 पीएक्स' कक्षा = 'स्थिति वाम' >
डिव >
उपरोक्त कोड में:
-
- सबसे पहले, जड़ ' डिव ” तत्व बनाया जाता है जो HTML तत्वों के लिए एक कंटेनर के रूप में कार्य करता है।
- अगला, दो '
'टैग' के अंदर उपयोग किए जाते हैं <दिव> ' उपनाम।
- उसके बाद, के मान ' 300 पीएक्स ' और ' 400 पीएक्स 'को प्रदान किया जाता है' ऊंचाई ' और ' चौड़ाई 'दोनों के गुण'
” टैग।
- इसके अलावा, एक वर्ग असाइन करें ' स्थिति सही ' और ' स्थितिबायाँ ” क्रमशः पहले और दूसरे “
” टैग के लिए।
अब, दर्ज करें ' <शैली> ” निम्नलिखित सीएसएस गुणों को लागू करने के लिए टैग करें:
< शैली >.स्थितिदाहिनी ओर {
सही नाव;
}
.पोजिशन लेफ्ट {
नाव छोड़ी;
}
शैली >
विवरण नीचे दिया गया है:
-
- सबसे पहले, 'का चयन करें स्थिति सही 'वर्ग और' का मान सेट करें सही ' इसके लिए ' तैरना ' संपत्ति। यह चयनित HTML तत्व को वेबपृष्ठ पर सही दिशा में ले जाता है।
- अगला, 'का चयन करें स्थितिबायाँ 'वर्ग और' का मान प्रदान करें बाएं ' तक ' तैरना ' संपत्ति। यह तत्व को बाईं ओर ले जाने के लिए ले जाता है।
संकलन चरण के अंत के बाद:
आउटपुट दिखाता है कि छवियों को बाएँ और दाएँ स्थिति में सेट किया गया है।
विधि 2: वस्तु-स्थिति गुण का उपयोग करना
' वस्तु स्थिति ” संपत्ति वेबपेज पर एक विशिष्ट स्थान पर छवि या HTML तत्व की नियुक्ति सुनिश्चित करती है। यह क्षैतिज और ऊर्ध्वाधर स्थिति पर नियंत्रण देता है, जिससे उपयोगकर्ता को वांछित दृश्य प्रभाव या लेआउट प्राप्त करने की अनुमति मिलती है। यह ज्यादातर डेवलपर्स द्वारा इमेज क्रॉपिंग, थंबनेल बनाने, कस्टम लेआउट आदि के लिए उपयोग किया जाता है।
यह गुण संख्यात्मक और खोजशब्द दोनों मान ले सकता है। उदाहरण के लिए, 'के लिए संख्यात्मक और कीवर्ड मान दोनों प्रदान किए जाते हैं वस्तु स्थिति ' संपत्ति। यह नीचे दिए गए कोड स्निपेट में CSS में एक छवि की स्थिति निर्धारित करता है:
< शैली >।संख्यात्मक मूल्य
{
वस्तु-स्थिति: 100px 20px;
}
.कीवर्डमान
{
वस्तु-स्थिति: बाएँ;
}
शैली >
< शरीर >
< डिव >
< आईएमजी स्रोत = 'book.jpg' ऊंचाई = '300 पीएक्स' चौड़ाई = '400 पीएक्स' कक्षा = 'कीवर्ड मान' >
< आईएमजी स्रोत = 'बीजी.जेपीजी' ऊंचाई = '300 पीएक्स' चौड़ाई = '400 पीएक्स' कक्षा = 'संख्यात्मक मूल्य' >
डिव >
शरीर >
उपरोक्त कोड स्निपेट में:
-
- पहले ' संख्यात्मक मूल्य 'वर्ग' के अंदर चुना गया है <शैली> ' उपनाम। और 'के संख्यात्मक मान 100 पीएक्स 20 पीएक्स 'सीएसएस को प्रदान किए जाते हैं' वस्तु स्थिति ' संपत्ति। ' 100 पीएक्स 'क्षैतिज दिशा में जोड़ा गया स्थान है और' 20 पीएक्स 'ऊर्ध्वाधर के लिए।
- अगला, ' कीवर्डवैल्यूज ” वर्ग का चयन किया गया है और “का कीवर्ड मान” बाएं 'को प्रदान किया जाता है' वस्तु स्थिति छवि को बाईं दिशा में संरेखित करने के लिए गुण।
- उसके बाद, अंदर ' <शरीर> ” टैग दो छवियां बनाई गई हैं, और ऊपर बनाई गई कक्षाएं उन्हें सौंपी गई हैं।
संकलन चरण के अंत के बाद, वेबपेज इस तरह दिखाई देता है:
स्नैपशॉट दिखाता है कि छवियां अब विशिष्ट स्थितियों पर सेट हैं।
निष्कर्ष
सीएसएस का उपयोग करके एक छवि की स्थिति निर्धारित की जा सकती है ' तैरना ' और ' वस्तु स्थिति ' गुण। ' तैरना ” संपत्ति कीवर्ड को मान के रूप में लेती है और तत्व को बाएं या दाएं स्थिति में ले जाती है। दूसरी ओर, ' वस्तु स्थिति ”, क्षैतिज और लंबवत दिशाओं में कीवर्ड और संख्यात्मक मान दोनों लेता है। इस आलेख ने सीएसएस में एक छवि की स्थिति निर्धारित करने की प्रक्रिया का प्रदर्शन किया है।