दिलचस्प पोस्ट
"उपयोग" ब्लॉक में वापसी या अपवाद पर एक एसक्यूएल कनेक्शन बंद है? कैसे विंडोज 7 मशीन पर जीसीसी स्थापित करने के लिए? सी ++ मल्टीचैरैक्टर शाब्दिक एनएसएलॉग गलत एन्कोडिंग JQuery में String.format के समतुल्य स्वयं के बीच अंतर और बस var क्या प्राथमिक कुंजी को स्वचालित रूप से MySQL में अनुक्रमित किया जाता है? मैं बाह्य सीएसएस के साथ इनलाइन शैलियों को ओवरराइड कैसे कर सकता हूं? बैज मापदंड को स्टोर करने का सर्वोत्तम तरीका? Xcode में अपवाद बिल्लापॉइंट फाइल को रेंडर करने के लिए जीएलयूटीयूटी / ओपनजीएल का उपयोग कैसे करें? क्या सीएसएस सामग्री पर .html दस्तावेज़, या .html टुकड़ा प्रदर्शित करना संभव है? एक TextView में टेक्स्ट कॉपी करें का चयन करें? उद्देश्य सी में मुझे क्यों जांचना चाहिए कि आत्म = शून्य नहीं है? एमएस एक्सेस में अपसेट करना

छवि क्रॉस ब्राउज़र का मूल आकार निर्धारित करें?

क्या क्लाइंट साइड पर एक <img src='xyz.jpg'> के भौतिक आयामों का निर्धारण करने के लिए कोई विश्वसनीय, फ्रेमवर्क स्वतंत्र तरीका है?

वेब के समाधान से एकत्रित समाधान "छवि क्रॉस ब्राउज़र का मूल आकार निर्धारित करें?"

आपके पास 2 विकल्प हैं:

विकल्प 1:

width और height विशेषताओं को निकालें और offsetWidth और offsetHeight पढ़ें

विकल्प 2:

जावास्क्रिप्ट Image ऑब्जेक्ट बनाएँ, src सेट करें, और width और height पढ़ें (आपको यह करने के लिए पेज पर भी जोड़ना नहीं पड़ता है)

 function getImgSize(imgSrc) { var newImg = new Image(); newImg.onload = function() { var height = newImg.height; var width = newImg.width; alert ('The image size is '+width+'*'+height); } newImg.src = imgSrc; // this must be done AFTER setting onload } 

पिक्का द्वारा संपादित करें : जैसा कि टिप्पणियों में सहमत हुए, मैंने इस चित्र को 'ओलोड' ईवेंट पर चलाने के लिए फ़ंक्शन को बदल दिया। अन्यथा, बड़े चित्र, height और width कुछ भी वापस नहीं होगा क्योंकि छवि अभी तक लोड नहीं हुई थी।

छवियां (कम से कम फ़ायरफ़ॉक्स पर) की एक naturalWidth ऊँचाई / ऊंचाई की संपत्ति होती है ताकि आप मूल चौड़ाई प्राप्त करने के लिए img.naturalWidth का उपयोग कर सकें।

 var img = document.getElementsByTagName("img")[0]; img.onload=function(){ console.log("Width",img.naturalWidth); console.log("Height",img.naturalHeight); } 

स्रोत

आप छवि को एक जावास्क्रिप्ट छवि ऑब्जेक्ट में पहले से लोड कर सकते हैं, फिर उस ऑब्जेक्ट की चौड़ाई और ऊँचाई गुणों की जांच करें।

बस थोड़ा सा गेब्रियल का दूसरा विकल्प बदलने के लिए, इसका उपयोग करना अधिक आसान होता है:

 function getImgSize(imgSrc, callback) { var newImg = new Image(); newImg.onload = function () { if (callback != undefined) callback({width: newImg.width, height: newImg.height}) } newImg.src = imgSrc; } 

एचटीएमएल:

 <img id="_temp_circlePic" src="http://localhost/myimage.png" style="width: 100%; height:100%"> 

नमूना कॉल:

 getImgSize($("#_temp_circlePic").attr("src"), function (imgSize) { // do what you want with the image's size. var ratio = imgSize.height / $("#_temp_circlePic").height(); }); 
 /* Function to return the DOM object's in crossbrowser style */ function widthCrossBrowser(element) { /* element - DOM element */ /* For FireFox & IE */ if( element.width != undefined && element.width != '' && element.width != 0){ this.width = element.width; } /* For FireFox & IE */ else if(element.clientWidth != undefined && element.clientWidth != '' && element.clientWidth != 0){ this.width = element.clientWidth; } /* For Chrome * FireFox */ else if(element.naturalWidth != undefined && element.naturalWidth != '' && element.naturalWidth != 0){ this.width = element.naturalWidth; } /* For FireFox & IE */ else if(element.offsetWidth != undefined && element.offsetWidth != '' && element.offsetWidth != 0){ this.width = element.offsetWidth; } /* console.info(' widthWidth width:', element.width); console.info(' clntWidth clientWidth:', element.clientWidth); console.info(' natWidth naturalWidth:', element.naturalWidth); console.info(' offstWidth offsetWidth:',element.offsetWidth); console.info(' parseInt(this.width):',parseInt(this.width)); */ return parseInt(this.width); } var elementWidth = widthCrossBrowser(element);