наведите курсор мыши и измените размер изображения в другой ориентации для контейнера div

Question

При использовании мыши над миниатюрой ориентации ширина и высота изображения не вписывались точно в «imax», элемент Div.

Я использую код в HTML-изображении:

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

и Javascript и 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. */
}