पैरामीटर के रूप में प्रतिशत का उपयोग कर HTML में छवि का आकार कैसे बदलें?

Question

मैं अपनी वेबसाइट पर एक छवि का आकार बदलना चाहता हूं। मुझे पता है कि छवि को आकार देने या चौड़ाई और ऊंचाई की गणना करने और मानों को पिक्सेल में सेट करने से इसे कैसे किया जाए। लेकिन मैं अलग-अलग आयामों के साथ एक ही तस्वीर का कई बार उपयोग करता हूं, इसलिए यदि मैं अपेक्षाकृत छवि को आकार के आकार में बदल सकता हूं तो मुझे कम समय लगेगा।

<img src='images/logo-beta.png' id="logo" height="75%" width="75%"/> 

मैंने यह कोशिश की है, हालांकि समस्या यह है कि आकार अपने मूल तत्व के सापेक्ष सेट है।

Answer 1

अकेले HTML या CSS का उपयोग करके आप जो भी करना चाहते हैं उसे करने का कोई तरीका नहीं है। आपको छवि के आयाम प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी, फिर उन आयामों का प्रतिशत गणना करें और उन्हें चित्रों में पिक्सल

Answer 2

पर एक विधि है, लेकिन यह सही नहीं है। इसके लिए एक रैपिंग तत्व की आवश्यकता होती है जिसका डिस्प्ले 'इनलाइन-ब्लॉक' पर सेट होता है और छवि को 'अधिकतम-चौड़ाई' का उपयोग करके आकार बदल दिया जाता है।

मुद्दा यह है कि मूल तत्व छवि की मूल चौड़ाई को बरकरार रखता है, जो आपकी आवश्यकताओं के आधार पर समस्याएं पैदा कर सकता है।

उदाहरण: http://jsfiddle.net/amustill/GnEw5/