<p>I have the next function:</p>

<pre><code>function setImagesWidth(id,width) {
    var images = document.getElementById(id).getElementsByTagName("img");
    for(var i = 0; i &lt; images.length;i++) {
        // If the real width is bigger than width parameter
            images[i].style.width=width;    
        //}         
    }       
}
</code></pre>

<p>I would like to set the css width attribute of all my img tags to a particular value only when the image real width is bigger than the attribute value. If it is possible, i would like a solution which does not use any particular framework. </p>

<hr>

<p><code>images[i].offsetWidth</code> returns 111 for an image of 109px width. Is this because 1px each side border? </p>

[{'answer_id': 42331, 'author': 'Jason Bunting', 'author_id': 1790, 'author_profile': 'https://Stackoverflow.com/users/1790', 'pm_score': 2, 'selected': False, 'text': '<p>Here is, hopefully, enough sample code to give you what you want:</p>\n\n<pre><code>var myImage = document.getElementById("myImagesId");\nvar imageWidth = myImage.offsetWidth;\nvar imageHeight = myImage.offsetHeight;\n</code></pre>\n\n<p>That should give you the numbers you need to derive the solution you want. I think you can write the rest of the code yourself. :)</p>\n\n<hr>\n\n<p>EDIT: Here, I couldn\'t help myself - is this what you are after?</p>\n\n<pre><code>function setImagesWidth(id,width) {\n   var images = document.getElementById(id).getElementsByTagName("img");\n   for(var i = 0; i &lt; images.length;i++) {\n      if(images[i].offsetWidth &gt; width) {\n         images[i].style.width= (width + "px");\n      }\n   }           \n}\n</code></pre>\n'}, {'answer_id': 42362, 'author': 'Domenic', 'author_id': 3191, 'author_profile': 'https://Stackoverflow.com/users/3191', 'pm_score': 0, 'selected': False, 'text': '<p>Careful, it looks like you might rather want <code>clientWidth</code>:</p>\n\n<p><a href="http://developer.mozilla.org/en/Determining_the_dimensions_of_elements" rel="nofollow noreferrer">http://developer.mozilla.org/en/Determining_the_dimensions_of_elements</a></p>\n'}, {'answer_id': 42381, 'author': 'Sergio del Amo', 'author_id': 2138, 'author_profile': 'https://Stackoverflow.com/users/2138', 'pm_score': 0, 'selected': False, 'text': '<p>EDIT: Can i accept somehow this answer as the final one?</p>\n\n<p>Since offsetWidth does not return any unit, the <em>.px</em> ending must be concatenated for the css attribute.</p>\n\n<pre><code>// width in pixels\nfunction setImagesWidth(id,width) {\n    var images = document.getElementById(id).getElementsByTagName("img");\n    for(var i = 0; i &lt; images.length;i++) {\n        if(images[i].offsetWidth &gt; width) {\n            images[i].style.width= (width+".px");   \n        }           \n    }       \n}\n</code></pre>\n'}, {'answer_id': 42494, 'author': 'Domenic', 'author_id': 3191, 'author_profile': 'https://Stackoverflow.com/users/3191', 'pm_score': 2, 'selected': True, 'text': '<p>@Sergio del Amo: Indeed, if you check out my link you\'ll see that you want <code>clientWidth</code> instead.</p>\n\n<p>@Sergio del Amo: You cannot, unfortunately, accept your own answer. But you do have an extraneous period in the "px" suffix, so let\'s go with this, including the <code>clientWidth</code> change:</p>\n\n<pre><code>// width in pixels\nfunction setImagesWidth(id, width)\n{\n    var images = document.getElementById(id).getElementsByTagName("img");\n    var newWidth = width + "px";\n    for (var i = 0; i &lt; images.length; ++i)\n    {\n        if (images[i].clientWidth &gt; width)\n        {\n            images[i].style.width = newWidth;\n        }                       \n    }\n}\n</code></pre>\n'}, {'answer_id': 28289783, 'author': 'Tomáš Zato', 'author_id': 607407, 'author_profile': 'https://Stackoverflow.com/users/607407', 'pm_score': 0, 'selected': False, 'text': '<p>Just in case you, the reader, came here from google looking for a way to tell what is actual image <em>file</em> pixel width and height, this is how:</p>\n\n<pre><code>var img = new Image("path...");\nvar width = image.naturalWidth;\nvar height = image.naturalHeight;\n</code></pre>\n\n<p>This becomes quite usefull when dealing with all kinds of drawing on scaled images.</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>    var img = document.getElementById("img");\r\n    var width = img.naturalWidth;\r\n    var height = img.naturalHeight;\r\n    document.getElementById("info").innerHTML = "HTML Dimensions: "+img.width+" x "+img.height + \r\n                                                "\\nReal pixel dimensions:"+ \r\n                                                width+" x "+height; </code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img id="img" src="http://upload.wikimedia.org/wikipedia/commons/0/03/Circle-withsegments.svg" width="100"&gt;\r\n\r\n&lt;pre id="info"&gt;\r\n\r\n&lt;/pre&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}]
['https://Stackoverflow.com/questions/42323', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2138/']