CODEWITHSUNDEEP
javascript
Sergio del Amo
Sergio del Amo

Reputation: 78096

Real image width with JavaScript

I have the next 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 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.

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

Upvotes: 5

Views: 15189

Answers (5)

Tom&#225;š Zato
Tom&#225;š Zato

Reputation: 53129

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

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

This becomes quite usefull when dealing with all kinds 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>

Upvotes: 0

Domenic
Domenic

Reputation: 112827

@Sergio del Amo: Indeed, if you check out my link you'll see that you want clientWidth instead.

@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 clientWidth change:

// 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;
        }                       
    }
}

Upvotes: 1

Jason Bunting
Jason Bunting

Reputation: 58931

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

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

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. :)

EDIT: Here, I couldn't help myself - is this what you are after?

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");
      }
   }           
}

Upvotes: 4

Sergio del Amo
Sergio del Amo

Reputation: 78096

EDIT: Can i accept somehow this answer as the final one?

Since offsetWidth does not return any unit, 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");   
        }           
    }       
}

Upvotes: 0

Domenic
Domenic

Reputation: 112827

Careful, it looks like you might rather want clientWidth:

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

Upvotes: 0

Related Questions