Real image width using JavaScript

Question

I have the following function:

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

I would like to set the css width attribute of all my img tags to a specific value only when the actual image width is larger than the attribute value. If possible, I would like to get a solution that does not use any specific structure.

---

images[i].offsetWidth returns 111 for an image with a width of 109 pixels. Is it because 1px on each side border?

Answer 1

@Sergio del Amo: Indeed, if you check my link, you will see that you want clientWidth .

@ Sergio del Amo: You cannot, unfortunately, accept your own answer. But you have an extraneous period in the suffix "px", so release it, including changing clientWidth :

 // width in pixels function setImagesWidth(id, width) { var images = document.getElementById(id).getElementsByTagName("img"); var newWidth = width + "px"; for (var i = 0; i < images.length; ++i) { if (images[i].clientWidth > width) { images[i].style.width = newWidth; } } } 

Answer 2

Here, hopefully, a sample code is enough to give you what you want:

 var myImage = document.getElementById("myImagesId"); var imageWidth = myImage.offsetWidth; var imageHeight = myImage.offsetHeight; 

This should give you the numbers you need to get the solution you need. I think you yourself can write the rest of the code. :)

---

EDIT: I couldn't help myself here - is that what you need?

 function setImagesWidth(id,width) { var images = document.getElementById(id).getElementsByTagName("img"); for(var i = 0; i < images.length;i++) { if(images[i].offsetWidth > width) { images[i].style.width= (width + "px"); } } } 

Answer 3

Caution, it looks like you'd rather want clientWidth :

http://developer.mozilla.org/en/Determining_the_dimensions_of_elements

Answer 4

EDIT: Can I somehow accept this answer as final?

Since offsetWidth does not return any block, the .px ending must be concatenated for the css attribute.

 // width in pixels function setImagesWidth(id,width) { var images = document.getElementById(id).getElementsByTagName("img"); for(var i = 0; i < images.length;i++) { if(images[i].offsetWidth > width) { images[i].style.width= (width+".px"); } } } 

Answer 5

Just in case, you, the reader, came here from Google, looking for a way to tell what the actual width and height of the pixel of the image file is, here's how:

 var img = new Image("path..."); var width = image.naturalWidth; var height = image.naturalHeight; 

This becomes very useful when working with all types of drawing on scaled images.

  var img = document.getElementById("img"); var width = img.naturalWidth; var height = img.naturalHeight; document.getElementById("info").innerHTML = "HTML Dimensions: "+img.width+" x "+img.height + "\nReal pixel dimensions:"+ width+" x "+height; 

 <img id="img" src="http://upload.wikimedia.org/wikipedia/commons/0/03/Circle-withsegments.svg" width="100"> <pre id="info"> </pre>