{"id":1512,"date":"2012-07-10T14:02:06","date_gmt":"2012-07-10T14:02:06","guid":{"rendered":"http:\/\/truelogic.org\/wordpress\/?p=1512"},"modified":"2015-09-16T08:46:52","modified_gmt":"2015-09-16T08:46:52","slug":"get-dimensions-of-an-image-and-change-it-in-javascript","status":"publish","type":"post","link":"https:\/\/truelogic.org\/wordpress\/2012\/07\/10\/get-dimensions-of-an-image-and-change-it-in-javascript\/","title":{"rendered":"Get dimensions of an image and change it in javascript"},"content":{"rendered":"            <script type=\"text\/javascript\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/plugins\/wordpress-code-snippet\/scripts\/shBrushJScript.js\"><\/script>\n            <script type=\"text\/javascript\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/plugins\/wordpress-code-snippet\/scripts\/shBrushXml.js\"><\/script>\n<p style=\"text-align: center;\"><a href=\"https:\/\/truelogic.org\/wordpress\/2012\/07\/10\/get-dimensions-of-an-image-and-change-it-in-javascript\/thumbnails\/\" rel=\"attachment wp-att-1522\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1522 aligncenter\" title=\"thumbnails\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2012\/07\/thumbnails.gif\" alt=\"\" width=\"473\" height=\"402\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2012\/07\/thumbnails.gif 473w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2012\/07\/thumbnails-300x254.gif 300w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><\/a><\/p>\n<p style=\"text-align: left;\">If you are ever faced with the problem of finding the true size of an image in a web page and you want to resize it dynamically then the code below is an example.<\/p>\n<p style=\"text-align: left;\">1.It gets the actual size of the image. i.e it will bypass the height and width attributes set in the IMG tag or the dimensions set to the image by CSS.<\/p>\n<p style=\"text-align: left;\">2.It can alter the displayable height and width of the image at runtime. The trick is to use the Image object in javascript and attach it to the image url in the target IMG tag.<\/p>\n<p style=\"text-align: left;\">The javascript code is given below. It uses JQuery.<\/p>\n<p><pre class=\"brush: js\">\t\t$(document).ready(function() {\r\n\t\t\timgSize();\r\n\t\t}\r\n\t\t);\t\r\n\t\tfunction imgSize() {\r\n\t\t\tvar src = $(&#039;#phoneImage&#039;).attr(&#039;src&#039;);\r\n\t\t\tvar ow = $(&#039;#phoneImage&#039;).attr(&#039;width&#039;);\r\n\t\t\tvar oh = $(&#039;#phoneImage&#039;).attr(&#039;height&#039;);\r\n\t\t\tvar newImg = new Image();\r\n\t\t    newImg.src = src;\r\n\t\t    var height = newImg.height;\r\n\t\t    var width = newImg.width;\r\n\t\t    p = $(newImg).ready(function(){\r\n\t\t\t\t\tvar nw = newImg.width;\r\n\t\t\t\t\tvar nh = newImg.height;\r\n\t\t\t\t\t\r\n\t\t\t\t\tif (parseInt(nw) &lt; parseInt(ow) )\r\n\t\t\t\t\t\t$(&#039;#phoneImage&#039;).attr(&quot;width&quot;, &quot;&quot;);\r\n\t\t\t\t\tif (parseInt(nh) &lt; parseInt(oh) )\r\n\t\t\t\t\t\t$(&#039;#phoneImage&#039;).attr(&quot;height&quot;, &quot;&quot;);\r\n\t\t        return {width: newImg.width, height: newImg.height};\r\n\t\t    });\r\n\t\t\r\n\r\n\t\t\t\r\n\t\t\t\t\t\r\n\t\t}\r\n<\/pre>The example IMG tag is shown below<\/p>\n<p><pre class=\"brush: xml\">&lt;img id=&quot;phoneImage&quot; align = center src=&quot;myimages\/demoimage.jpg&quot;  width=&quot;150&quot; height=&quot;190&quot;\/&gt;\r\n<\/pre>The sample logic used in the javascript is that if the the actual height or width of the image is lesser than the assigned height and width attribute tags , then it assigns the original width or height of the image by making that attribute blank.<\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>If you are ever faced with the problem of finding the true size of an image in a web page and you want to resize <a class=\"mh-excerpt-more\" href=\"https:\/\/truelogic.org\/wordpress\/2012\/07\/10\/get-dimensions-of-an-image-and-change-it-in-javascript\/\" title=\"Get dimensions of an image and change it in javascript\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":1522,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-1512","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/1512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/comments?post=1512"}],"version-history":[{"count":19,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/1512\/revisions"}],"predecessor-version":[{"id":1531,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/1512\/revisions\/1531"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media\/1522"}],"wp:attachment":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media?parent=1512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/categories?post=1512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/tags?post=1512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}