{"id":5,"date":"2013-10-24T07:49:00","date_gmt":"2013-10-24T07:49:00","guid":{"rendered":"http:\/\/subashselvaraj.com\/?p=5"},"modified":"2025-06-21T07:37:17","modified_gmt":"2025-06-21T07:37:17","slug":"javascript-resize-image-proportionally-and-clipping","status":"publish","type":"post","link":"https:\/\/subashselvaraj.com\/index.php\/2013\/10\/24\/javascript-resize-image-proportionally-and-clipping\/","title":{"rendered":"Javascript Resize Image Proportionally and Clipping"},"content":{"rendered":"<div dir=\"ltr\" style=\"text-align: left;\">\n<p><span style=\"font-family: Georgia, Times New Roman, serif;\">Setting height and width to an image is a general scenario in web development. We need to take in account that image shouldn&#8217;t get stretched, it should be resized based on aspect ratio. So I created a javascript helper which resizes the image proportionally based on the traget-height and target-width instead of setting the height and width directly. Also in some case we need to resize the image proportionally from center and clip the remaining area that goes out of the target-height and width.&nbsp;<\/span><br \/>\n<span style=\"font-family: Georgia, Times New Roman, serif;\"><br \/>\n<\/span><span style=\"font-family: Georgia, Times New Roman, serif;\">Here you find the demo<\/span><span style=\"font-family: Georgia, 'Times New Roman', serif;\">&nbsp;<\/span><a style=\"font-family: Georgia, 'Times New Roman', serif;\" href=\"http:\/\/jsfiddle.net\/sesubash\/Jq2Rv\/2\/\">http:\/\/jsfiddle.net\/sesubash\/Jq2Rv\/2\/<\/a><\/p>\n<p><span style=\"font-family: Georgia,'Times New Roman',serif;\">Here you go for the source.<a href=\"https:\/\/github.com\/sesubash\/Javascript-Image-Resizer\">&nbsp;https:\/\/github.com\/sesubash\/Javascript-Image-Resizer<\/a><\/span><\/p>\n<h2><span style=\"font-family: Georgia,'Times New Roman',serif;\"><a href=\"https:\/\/github.com\/sesubash\/Javascript-Image-Resizer#usage---html\" name=\"usage---html\"><\/a><span style=\"font-size: small;\"><span style=\"color: #cccccc;\"><span style=\"text-decoration: underline;\">Usage &#8211; html<\/span><\/span><\/span><\/span><\/h2>\n<pre class=\"brush:html\">&lt;img id=\"myImg\" src=\"url.jpg\" onLoad=\"resizeImage(this)\"&gt;\n&lt;img id=\"clipImage\" src=\"url.jpg\" onLoad=\"clipImg(this)\"&gt;<\/pre>\n<h2><span style=\"font-size: small;\"><span style=\"color: #cccccc;\"><span style=\"text-decoration: underline;\"><span style=\"font-family: Georgia,'Times New Roman',serif;\">JavaScript<\/span><\/span><\/span><\/span><\/h2>\n<pre class=\"brush:js\">function resizeImage(img){\n    ImageResizer.fixImage(img,215,217);&nbsp;\n}\n\nfunction clipImg(img){\n    ImageResizer.clipImage(img,215,217);&nbsp;\n}\n<\/pre>\n<p><span style=\"font-family: Georgia,'Times New Roman',serif;\">Hope this helps for some one.<\/span><\/p>\n<p><span style=\"font-family: Georgia,'Times New Roman',serif;\">Cheers!<\/span><\/p>\n<div><span style=\"font-family: Georgia,'Times New Roman',serif;\">&nbsp;<\/span><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Setting height and width to an image is a general scenario in web development. We need to take in account that image shouldn&#8217;t get stretched, it should&#8230; <\/p>\n","protected":false},"author":1,"featured_media":224,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_mi_skip_tracking":false,"_themeisle_gutenberg_block_has_review":false},"categories":[4,5],"tags":[13,14],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/posts\/5"}],"collection":[{"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/comments?post=5"}],"version-history":[{"count":3,"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/posts\/5\/revisions"}],"predecessor-version":[{"id":212,"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/posts\/5\/revisions\/212"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/media\/224"}],"wp:attachment":[{"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/media?parent=5"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/categories?post=5"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/subashselvaraj.com\/index.php\/wp-json\/wp\/v2\/tags?post=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}