Keep pressing the buttons to know how the height changes

Return to tutorial on Image naturalHeight | Image naturalWidth

JavaScript

<script language='JavaScript' type='text/JavaScript'>
<!--
function resize_img(st) {
var x=document.getElementById("i1");
img_height=x.height;
img_width=x.width;
switch(st){
case 'up':
if(img_height <300 ){
img_height=img_height *2;
}	
break;

case 'down':
if(img_height >10 ){
img_height=img_height/2;
}	
break;

case 'width-up':
if(img_width < 400 ){
img_width=img_width * 2;
}	
break;
case 'width-down':
if(img_width >10 ){
img_width=img_width / 2;
}	
break;
}

document.getElementById("i1").width=img_width;
document.getElementById("i1").height=img_height;
document.getElementById("msg").innerHTML='Height : ' +img_height + ', Width : ' + img_width;
}
function reset_img(){
var x=document.getElementById("i1");
img_height=x.naturalHeight;
img_width=x.naturalWidth;

document.getElementById("i1").width=img_width;
document.getElementById("i1").height=img_height;
document.getElementById("msg").innerHTML='Height : ' +img_height + 'Width : ' +img_width ;
}
//-->
</script>

HTML

<img src=images/help.jpg id='i1'>

</div><div class='col-md-6'> 
<input type=button onClick=resize_img('up') value='Expand ( Height )'>
<input type=button onClick=resize_img('down') value='Compress ( Height )'>

<input type=button onClick=resize_img('width-up') value='Expand ( Width )'>
<input type=button onClick=resize_img('width-down') value='Compress ( Width )'>

<input type=button onClick=reset_img() value='Reset to NaturalWidth & naturalHeight'>
<br><div id=msg></div>