Como manter imagem no meio absoluto da tela quando redimensionada

[Dian Carlos 29]

Olá amigos do iMasters. :thumbsup:

 

Estou desenvolvendo uma galeria pro meu site, o máximo de resolução que a imagem chega é até 800X600 (fiz um padrão). Ai eu deixo ela no meio exato da tela com o seguinte css.

 

#PhotoViewer .PhotoCase .Photo {
position: absolute;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -400px;
height: 100%;
max-height: 600px;
max-width: 800px;
}

 

Mas se repararem ela está com o height definido como 100%, ou seja, quando eu redimensiono a tela ela diminui de um jeito que fique do tamanho da div mãe ( que no caso é #PhotoViewer). Até ai tudo bem, mas, quando eu redimensiono a tela a foto sobe e não fica no centro absoluto. Eis os prints:

 

- Imagem normal ( com a janela maximizada)

 

- Imagem redimensionada ( com a janela redimensionada )

 

Onde eu estou errando? Com eu posso deixar a foto no meio quando a janela for redimensionada?

 

Agradeço a ajuda de todos..

[Perfil-Excluido 0]

Olá Dian, eu também tinha o mesmo problema. Consegui resolver seguindo um tutorial publicado pelo grande Maujor (O dinossauro das CSS).

 

Link do tutorial:

 

http://maujor.com/tutorial/meio_tela.php

 

Utilizei para centralizar o slogan que se encontra na página inicial do meu site e funcionou! A imagem fica sempre no meio da tela, mesmo depois que redimensionamos o tamanho da janela. Mas no meu caso eu não coloquei a altura com 100% e também não utilizei max-height e max-width. Bom, Espero que também consiga resolver o seu problema. :thumbsup:

[Dian Carlos 29]

robot7p, obrigado pela resposta, mas eu consegui fazer o que queria.

 

Na verdade devia ter postado na area de java script, pois usei a função 'resize' do jquery para isso.

 

A função verifica quando a janela é redimensionada, ai verifica as dimensões da foto e atribui ao css da página.

 

function Redimensionar(){
var fotoAltura = $('.Photo').height();
var fotoLargura = $('.Photo').width();
$(".Photo").css({marginTop: '-' + fotoAltura / 2 + 'px', marginLeft: '-' + fotoLargura / 2 + 'px'});
}

$(window).resize(Redimensionar);

 

Esse ai deu certo..podem marcar como resolvido..

[Perfil-Excluido 0]

:thumbsup: