mouseover and resize image of different orientation to div container

When using mouseover a thumbnail of orientation, the image width and height did not fit exactly into "imax", a Div element.

I use the code in HTML Image:

onmouseover='chgImg(this.src)' onmouseout='resImg()'

and Javascript and CSS:

function chgImg(asd) {
    oim = document.getElementById("im").src;
    return document.getElementById("im").src=asd;
}
function resImg() {
    return document.开发者_运维百科getElementById("im").src=oim;
}


#imax {
    width:222px;
    height:222px;
}
#im {
    width:222px;
    height:auto; /* <-- this will overlap which is a problem. */
}