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%.
<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>
function onClick()
{
iterating through some objects
if(node.className=="Image")
{
node.childNodes[0].width = 100+"%";
node.childNodes[0].height = 100+"%";
}
}
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%