The percentage unit is relative to your browser window, so you will get 20% of the browser window width for the image width, and 20% of the browser window height for the image height.
So to make the image a square, you should specify the values in pixel (or other units) to be the same. Example: width:100px; height:100px;
Edit
Keep the css for the width of image, so width: 20%;
Here's the js code:
window.onresize = function() {
resize();
};
window.onload = function(){
resize();
};
function resize(){
var imgs = document.getElementsByTagName('img');
for(i = 0; i< imgs.length; i++){
document.getElementsByTagName('img')[i].style.height = document.getElementsByTagName('img')[i].clientWidth;
}
}