max-width não funciona no firefox e IE

[Maycon Brito 0]

Olá pessoal,

 

estou tendo um problema de compatibilidade no site que estou desenvolvendo. No Chrome está tudo funcionando perfeitamente, porém, no Firefox e no IE a imagem carregada no componente img está superando a altura máxima que defini por padrão, além disso está excendendo o tamanho da div no qual ela pertence.

 

Segue abaixo os trechos de código referentes a este problema:

 

HTML:

<div id="galeria">

<div id="subGaleria">

<div id="loader">

<img class='galeria'>

</img>

<div class="arrow-left"></div>

<div class="arrow-right"></div>

</div>

</div>

 

 

 

CSS:

div#galeria{

position:absolute;

width: 100%;

height: 80%;

display:none;

top:6%;

z-index:101;

}

 

div#loader{

background:url(../pictures/preLoader.gif) no-repeat center center;

}

img.galeria{

background-color: ivory;

vertical-align: middle;

max-height: 100%;

max-width: 80%;

min-height: 100%;

z-index: 102;

}

Conto com a ajuda de vocês. Obrigado!

 

[Landerson Almeida 2]

CSS:

div#galeria{

position:absolute;

width: 100%;

height: 80%;

display:none;

top:6%;

z-index:101;

}

tenta usar este

CSS:

div#galeria{

position:absolute;

width: 500px;

height: 100px;

display:none;

margin:0 auto;

top:6%;

z-index:101;

}

[Maycon Brito 0]

Olá Leanderson,

 

pois é, eu testei a sua sugestão, porém existem dois problemas:

1º - A div é dimensionada no tamanho especificado no CSS sugerido por você, porém a imagem dentro desta div continua extrapolando o seu tamanho.

 

2º - Não seria legal eu definir um tamanho fixo para as imagens, como por exemplo 500px de largura, pois dependendo da imagem ela tem um tamanho e proporção diferente das demais, o que pode distorcê-la.

 

 

Obrigado pela ajuda, e continuo aberto a novas sugestões.

Leanderson,

 

eu fiz da maneira que você me sugeriu, só que para a classe da imagem, inserindo um max-width: 500px;

 

Problema solucionado.

 

Obrigado!