пропорции изображения в chrome (остальные правильно отображают)

[kompolom]

Имеется галерея изображений "ссылка", из нескольких наборов. разрешение может быть разным. по клику на картинке в центре, она должна занимать всю ширину wrapper и растягиваться соответственно вниз до оригинального размера. В мозилле и опере так и происходит, а вот хром почему то меняет соотношение сторон картинки.

#wrapper {
	width: 1000px;
	min-height: 100%;
	height: auto !important;
	margin: 2% auto 0;
	background:#FFFFF5 ;
	padding: 2%;
}
#gallery #photo {
    display:block;
    margin:10px auto;
    max-width: 60%;

}
 .realsize{

    top: 0;
    left: 0;
    z-index: 1;
    max-height: 100% !important;
    max-width: 100% !important;
    width:100%;
    height: 100%;

изменение размера происходит путем добавления к изображению класса realsize

$("#photo").click(function(){

            $(this).toggleClass("realsize");
         });

структура страницы:

<div id="wrapper" class="rounded light">

        <div id="gallery">
            <ul id="sets"></ul>
            <div id="loading"></div>
            <img id="photo" src="images/loading.gif" />

            <ul id="thumbs"></ul>
        </div>
        <div class="clear"></div>
    </div>

подскажите, пожалуйста что делать.

Edited October 16, 2012 by kompolom

[kompolom]

#wrapper {
	width: 1000px;
	min-height: 100%;
	height: auto !important;
	margin: 2% auto 0;
	background:#FFFFF5 ;
	padding: 2%;
}
#gallery #photo {
    display:block;
    margin:10px auto;
    max-width: 60%;

}
 .realsize{

    top: 0;
    left: 0;
    z-index: 1;
    max-width: 100% !important;
    width:100%;

Так работает. И как я сразу не догадался...

Кто столкнется с такой же проблемой, просто указывайте только ширину или только высоту в относительных единицах.

Вопрос решен.