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").height;
if(st=='up'){
if(x<300){
x=x*2;
}
}else{
if(x>5){
x=x/2;
}
}
document.getElementById("i1").width=10;
document.getElementById("i1").height=x;
document.getElementById("msg").innerHTML='Height : ' +x  ;
}

function reset_img(){
document.getElementById("i1").width=document.getElementById("i1").naturalWidth;
document.getElementById("i1").height=document.getElementById("i1").naturalHeight;
document.getElementById("msg").innerHTML='Height : ' +document.getElementById("i1").naturalHeight  ;
}
//-->
</script>

HTML

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

</div><div class='col-md-6'> 

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