Set Height and Width of an image to 100% using JavaScript

Question

4.00/5 (1 vote)

See more:

I have an image element in a single celled table, when i click on a button i want to set the height and width of the image element to the size of the table cell.

The table cell is defined by user and we do not know the dimensions of the cell. I know if we set the height and width of an image to 100% it grabs or adjusts itself to the exact dimension of its parent (which is the cell in this case). So here is the code i am using to change the image size to 100%.

HTML

<td class="image">
<img alt="" class="CustomImage"  önerror="this.src='/Image1.bmp'" src="/Image2.bmp" 
         style="position: inherit; top: 0px; left: 50%; height: 50%; width: 50%;" /></td>

JavaScript

function onClick()
{
iterating through some objects
if(node.className=="Image")
{
//the 0th node is the image element
node.childNodes[0].width = 100+"%"; 
node.childNodes[0].height = 100+"%";//here is where the code is failing and below are various ways i tried to solve
}
}

JavaScript

//various ways
var x = 100;
var size = x.toString()+"%";

var size = "100%"

var size = 100+"%";
var newsize = size.valueof();
var newsize1 = parseInt(size, 10);

no matter whatever i do, the size i am defining is "100%" with quotes. In runtime the height is (height = 50%) without quotes. But when i put the height, its taking (height = "100%") with quotes, so its not working.

How do i achieve this? how do i remove the quotes and assign 100% to the height?

Hint/Extra Information:
the function .toString() converts 100 to "100"
is there anything that converts "100%" to 100%

Posted 28-Sep-12 6:24am

amarasat

Updated 28-Sep-12 6:27am

v2

Add a Solution

3 solutions

Solution 1

Have you tried using '100%' or 100 +'%'?

Posted 28-Sep-12 7:38am

Pro Idiot

Updated 28-Sep-12 7:39am

v2

Comments

amarasat 28-Sep-12 13:40pm

Yes ofcourse,

thats what i showed in the various ways, i tried both of them

Pro Idiot 28-Sep-12 13:41pm

Tried with single quotes ?
you didn't mention that !

amarasat 28-Sep-12 14:03pm

I am sorry, i misunderstood

yes i have tried now with single quotes in all possible ways, it didn't work still!!

Solution 2

If you know the Pixel height , then you can also use

JavaScript

node.childNodes[0].width = "400px"// Your Pixel or you can it's parent element's Height in pixel and set to it.

Posted 28-Sep-12 8:09am

Pro Idiot

Comments

amarasat 28-Sep-12 14:50pm

This is what i am explaining from the start:

1.) No i dont know the pixel height, since i am calculating it dynamically
2.) What you have suggested is not working and i already told that.
3.) Yes its parent elements height, that is the whole key y i ahve posted a question, get the parent elments height in pixel without quotations, that the whole reason for the question

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

amarasat · Accepted Answer · 2012-09-28T08:53:00

Solution 3

JavaScript

function onClick()
{
   //iterating through some objects
   if(node.className=="Image")
   {
      //the 0th node is the image element
      node.childNodes[0].width = node.clientHeight; 
      node.childNodes[0].height = node.clientWidth;//this is the only solution i see as of now
   }
}

Posted 28-Sep-12 8:53am

amarasat

Updated 28-Sep-12 9:34am

v3