{"id":537,"date":"2024-01-21T16:35:52","date_gmt":"2024-01-21T11:05:52","guid":{"rendered":"http:\/\/codetheory.in\/?p=537---c6ce056b-c011-46a7-bd92-cb383c7c17a1"},"modified":"2024-01-21T16:35:52","modified_gmt":"2024-01-21T11:05:52","slug":"get-the-original-width-and-height-of-an-image","status":"publish","type":"post","link":"https:\/\/codetheory.in\/get-the-original-width-and-height-of-an-image\/","title":{"rendered":"Get the Original Width and Height of an Image"},"content":{"rendered":"<p>If you use the <code>width<\/code> and <code>height<\/code> properties of the image node (vanilla Javascript) or use jQuery&#8217;s <code>width()<\/code> or <code>height()<\/code> function, you&#8217;ll get the size that you see in the browser. Getting the actual dimension (native or natural width\/height) of the image is actually quite easy. Let&#8217;s see how.<\/p>\n<p><!--more--><\/p>\n<h2>Using naturalWidth and naturalHeight<\/h2>\n<p>The <code>naturalWidth<\/code> and <code>naturalHeight<\/code> are awesome JS properties that&#8217;ll do the job. It is supported in all browsers except Internet Explorer version 8 and below.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar image = document.getElementById('my_image');\r\nvar width = image.naturalWidth;\r\nvar height = image.naturalHeight;\r\n<\/pre>\n<h2>Using an Image Object<\/h2>\n<p>For IE8 and below or any other browser that does not support the aforementioned 2 properties, we can just load the image in our JS code and then get the width\/height.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar image = new Image(); \/\/ or document.createElement('img')\r\nvar width, height;\r\nimage.onload = function() {\r\n  width = this.width;\r\n  height = this.height;\r\n};\r\nimage.src = 'http:\/\/lorempixel.com\/output\/nature-q-c-640-480-3.jpg';\r\n<\/pre>\n<h2>Final Demo<\/h2>\n<p>So, here&#8217;s a final demo that does the job.<\/p>\n<pre class=\"_cssdeck_embed\" data-pane=\"output\" data-user=\"csscreations\" data-href=\"aqukktfh\" data-version=\"0\"><\/pre>\n<p>The code checks for the support of <code>naturalWidth<\/code>, if not supported then creates an Image object and uses that.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you use the width and height properties of the image node (vanilla Javascript) or use jQuery&#8217;s width() or height() function, you&#8217;ll get the size that you see in the browser. Getting the actual dimension (native or natural width\/height) of the image is actually quite easy. Let&#8217;s see how.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[54],"_links":{"self":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/537"}],"collection":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/comments?post=537"}],"version-history":[{"count":4,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/537\/revisions"}],"predecessor-version":[{"id":541,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/537\/revisions\/541"}],"wp:attachment":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/media?parent=537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/categories?post=537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/tags?post=537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}