Utilisation de .addclass avec une image

Bonjour,

Je m'arrache les cheveux depuis 2 jours sur un problème que je pensais simple...mais en fait non! :

J'ai codé un petit menu calé au centre et en bas de ma page, au dessus duquel j'ai une image qui prend le reste de la hauteur de l'écran.

Sous l'image, j'ai placé un petit bouton "Fullscreen" qui doit permettre d'effacer le menu et de redimensionner l'image pour qu'elle prenne toute la hauteur de l'écran avec ce script:

D'abord le CSS:

#menu {height:10px; bottom:0;} 
.normal{width:100%; top:25px; bottom:100px;} --> le container qui va caler l'image
.img {max-height:100%} --> l'image s'adapte à la hauteur imposée par le container
.new{width:100%; top:10px; bottom:10px;} --> modification du container sensé permettre un redimensionnement de l'image.

Le code HTML:

<div id="photo_container" class="normal">
<img src="">
</div>
<div id="menu"><div id="bouton"></div></div>

Puis enfin le script:

$("#bouton").click(function(event) {
    $("#menu").fadeToggle(200); -->fait disparaitre le menu
    $("#photo_container").removeClass("normal", 400); 
    $("#photo_container").addClass("new", 400); 

Résultat, le menu disparaît bien mais le container de l'image prend bien la nouvelle classe .new mais cela ne provoque pas un redimensionnement de l'image qui est pourtant toujours en "max-height:100%".

Faut-il rafraîchir l'image après l'exécution du script pour qu'elle redétecte le container et si oui, comment dois-je m'y prendre?