एचटीएमएलमधील प्रतिमेचा आकार वेगवेगळ्या प्रकारे कसा समायोजित करायचा

तुम्हाला तुमच्या वेब पेजवर इमेज टाकायची आहे का, परंतु डिझाइनमध्ये बसण्यासाठी त्याचा आकार कसा समायोजित करायचा हे आपल्याला माहित नाही? तुम्हाला इमेजची रुंदी आणि उंची सुधारण्यासाठी HTML टॅग आणि गुणधर्म कसे वापरायचे ते शिकायचे आहे का? तुम्हाला प्रत्येक पद्धतीचे फायदे आणि तोटे माहित आहेत का? उत्तर होय असल्यास, हा लेख तुमच्यासाठी आहे.

या लेखात, html मध्ये इमेजचा आकार कसा समायोजित करायचा ते आम्ही तुम्हाला शिकवणार आहोत, विविध पर्याय आणि संसाधने वापरणे जे तुम्हाला तुमच्या वेबसाइटसाठी आकर्षक आणि ऑप्टिमाइझ केलेल्या प्रतिमा तयार करण्यास अनुमती देईल. आम्ही तुम्हाला प्रत्येक पर्यायाचे फायदे आणि तोटे तसेच तुमचे काम सुधारण्यासाठी काही टिप्स आणि चांगल्या पद्धती देखील दाखवणार आहोत.

एचटीएमएलमध्ये प्रतिमा काय आहे आणि ती कशी घालावी

html मधील प्रतिमा हा एक घटक आहे जो तुम्हाला प्रदर्शित करण्यास अनुमती देतो ऑब्जेक्टचे दृश्य प्रतिनिधित्व, एक व्यक्ती, एक लँडस्केप किंवा इतर काहीही. html मध्ये इमेज टाकण्यासाठी टॅग वापरला जातो , जो रिक्त टॅग आहे, म्हणजे. ज्याला कोणताही बंद नाही.

लेबल आपल्याला प्रतिमेची माहिती आणि वैशिष्ट्ये निर्दिष्ट करण्यास अनुमती देणारे अनेक गुणधर्म आहेत. सर्वात महत्वाचे आहेत:

• src: ही विशेषता आहे जी प्रतिमा फाइलचा मार्ग किंवा पत्ता दर्शवते. तो सापेक्ष मार्ग असू शकतो (त्याच वेबसाइटवर) किंवा निरपेक्ष मार्ग (दुसर्‍या वेबसाइटवर). उदाहरणार्थ: एकतर .
• Alt: ही विशेषता आहे जी प्रतिमेचा पर्यायी मजकूर दर्शवते, म्हणजे, प्रतिमा लोड करता येत नाही किंवा स्क्रीन रीडर वापरला जात असताना प्रदर्शित केलेला मजकूर. हे एक अनिवार्य गुणधर्म आहे आणि प्रतिमेच्या सामग्रीचे किंवा कार्याचे वर्णन करणे आवश्यक आहे. उदाहरणार्थ:.
• शीर्षक: ही विशेषता आहे जी प्रतिमेचे शीर्षक दर्शवते, म्हणजे, कर्सर फिरवलेला असताना प्रदर्शित केलेला मजकूर प्रतिमा बद्दल. ही एक पर्यायी विशेषता आहे आणि Alt मजकूरापेक्षा वेगळी असू शकते. उदाहरणार्थ: .

रुंदी आणि उंचीचे गुणधर्म वापरून आकार कसा समायोजित करायचा

html मध्ये प्रतिमेचा आकार समायोजित करण्याचा सर्वात सोपा मार्ग आहे रुंदी आणि उंची गुणधर्म वापरणे आहे) जे तुम्हाला प्रतिमेची रुंदी आणि उंची पिक्सेलमध्ये निर्दिष्ट करण्यास अनुमती देते. उदाहरणार्थ:

या गुणधर्मांचे काही फायदे आणि तोटे आहेत:

• Ventajas:
  • ते वापरण्यास सोपे आहेत आणि कोणत्याही अतिरिक्त ज्ञानाची आवश्यकता नाही.
  • ते आपल्याला प्रतिमा लोड करण्यापूर्वी आवश्यक जागा आरक्षित करण्याची परवानगी देतात, जे लोडिंग दरम्यान पृष्ठाला उडी मारण्यापासून किंवा बदलण्यापासून प्रतिबंधित करते.
  • चा पर्याय देतो प्रतिमेचा आकार डिझाईनशी जुळवून घ्या मूळ फाइलमध्ये बदल न करता पृष्ठाचे.
• तोटे:
  • मूळ आकाराव्यतिरिक्त इतर मूल्ये वापरल्यास ते प्रतिमेचे गुणोत्तर किंवा गुणोत्तर विकृत करू शकतात.
  • हे वापरकर्त्याच्या स्क्रीन किंवा डिव्हाइसच्या आकारानुसार प्रतिमा आकार समायोजित करण्याची परवानगी देत ​​​​नाही.
  • ते प्रभाव लागू करण्याची परवानगी देत ​​​​नाहीत किंवा प्रतिमेसाठी अतिरिक्त शैली.

सीएसएस वापरून एचटीएमएलमध्ये इमेजचा आकार कसा बदलायचा

आणखी एक मार्ग अधिक प्रगत आणि लवचिक HTML मधील प्रतिमेचा आकार समायोजित करण्यासाठी CSS (कॅस्केडिंग स्टाईल शीट्स) वापरणे आहे, ही एक भाषा आहे जी तुम्हाला HTML घटकांवर शैली परिभाषित आणि लागू करण्यास अनुमती देते. CSS वापरण्यासाठी तुम्ही टॅग वापरू शकता html दस्तऐवजाच्या आत, .css विस्तारासह बाह्य फाइल. उदाहरणार्थ:

img { width: 500px; height: 600px; } एकतर

CSS वापरण्याचे काही फायदे आणि तोटे आहेत:

• Ventajas:
  • ऑब्जेक्ट-फिट गुणधर्म किंवा calc() फंक्शन वापरून, तुम्हाला प्रतिमेचा आकार प्रमाणानुसार समायोजित करण्याची अनुमती देते.
  • चला प्रतिमा आकार समायोजित करूया सापेक्ष युनिट्स (%, em, vw, vh) किंवा मीडिया क्वेरी वापरून वापरकर्त्याच्या स्क्रीन किंवा डिव्हाइसच्या आकारावर अवलंबून.
  • प्रतिमेवर अतिरिक्त प्रभाव किंवा शैली लागू केल्या जाऊ शकतात, जसे की सीमा, सावल्या, फिल्टर किंवा परिवर्तन.
• तोटे:
  • CSS भाषेचे अधिक ज्ञान आणि प्रभुत्व आवश्यक आहे.
  • संघर्ष किंवा विसंगती निर्माण करू शकतात पृष्ठ किंवा प्रतिमेवर लागू केलेल्या इतर शैलींसह.
  • बर्याच शैली किंवा प्रभाव वापरल्यास ते कार्यप्रदर्शन किंवा पृष्ठ लोडिंग गती प्रभावित करू शकते.

बाह्य प्रोग्राम वापरून आकार कसा समायोजित करायचा

समायोजित करण्याचा तिसरा पर्याय html मधील प्रतिमेचा आकार एक बाह्य प्रोग्राम वापरणे आहे जे तुम्हाला प्रतिमा फाइल पृष्ठामध्ये समाविष्ट करण्यापूर्वी आकार सुधारण्याची परवानगी देते. यापैकी काही कार्यक्रम आहेत:

• जीआयएमपीः एक विनामूल्य आणि मुक्त स्त्रोत प्रोग्राम आहे जो तुम्हाला व्यावसायिकरित्या प्रतिमा संपादित आणि हाताळण्याची परवानगी देतो. GIMP सह तुम्ही प्रतिमेचा आकार बदलू शकता "स्केल इमेज" पर्याय वापरणे "इमेज" मेनूमधून. तुम्ही "फाइल" मेनूमधील "एक्सपोर्ट म्हणून" पर्याय वापरून प्रतिमेचे वजन आणि गुणवत्ता देखील ऑप्टिमाइझ करू शकता. तुम्ही GIMP च्या अधिकृत वेबसाइटवरून डाउनलोड करू शकता.
• फोटोशॉप: एक सशुल्क आणि रेफरल प्रोग्राम आहे जो तुम्हाला प्रगत मार्गाने प्रतिमा तयार आणि संपादित करण्यास अनुमती देतो. फोटोशॉपद्वारे तुम्ही "इमेज" मेनूमधील "इमेज साइज" पर्याय वापरून इमेजचा आकार बदलू शकता. आपण वजन आणि प्रतिमा गुणवत्ता देखील ऑप्टिमाइझ करू शकता "वेबसाठी जतन करा" पर्याय वापरून "फाइल" मेनूमधून. आपण त्याच्या अधिकृत वेबसाइटवरून फोटोशॉप डाउनलोड करू शकता.
• ऑनलाइन इमेज रिसायझर: हे एक विनामूल्य ऑनलाइन साधन आहे जे तुम्हाला कोणताही प्रोग्राम स्थापित न करता प्रतिमेचा आकार बदलू देते. ऑनलाइन इमेज रिसायझरसह तुम्ही तुमच्या संगणकावरून किंवा URL वरून इमेज अपलोड करू शकता, इच्छित रुंदी आणि उंची निवडा आणि सुधारित प्रतिमा डाउनलोड करा. तुम्ही त्याच्या अधिकृत वेबसाइटवरून ऑनलाइन इमेज रिसायझरमध्ये प्रवेश करू शकता.

आपल्याला पाहिजे त्या प्रकारे प्रतिमा समायोजित करा

या लेखात आकार कसा समायोजित करायचा ते आम्ही तुम्हाला दाखवले आहे HTML मधील प्रतिमेचे, भिन्न पर्याय आणि संसाधने वापरून जे तुम्हाला तुमच्या वेबसाइटसाठी आकर्षक आणि ऑप्टिमाइझ केलेल्या प्रतिमा तयार करण्यास अनुमती देतील. आम्ही तुम्हाला प्रत्येक पर्यायाचे फायदे आणि तोटे देखील दाखवले आहेत, तसेच काही टिपा आणि चांगल्या पद्धती तुमचे काम सुधारण्यासाठी.

आम्हाला आशा आहे की हा लेख तुमच्यासाठी उपयुक्त ठरला आहे आणि तुम्हाला HTML मधील प्रतिमेचा आकार समायोजित करण्यासाठी हे पर्याय आणि संसाधने वापरून पाहण्यासाठी प्रोत्साहित केले जाईल. लक्षात ठेवा की सर्वात महत्वाची गोष्ट निवडणे आहे तुमच्या गरजा आणि उद्दिष्टांना अनुकूल असा पर्याय.

जर तुम्हाला हा लेख आवडला असेल तर तो तुमच्या मित्रांसह शेअर करा. आणि जर तुम्हाला html आणि इतर ऍप्लिकेशन्सबद्दल अधिक टिपा आणि युक्त्या जाणून घ्यायच्या असतील तर आमच्या वेबसाइटला भेट द्या. पुन्हा भेटू!