Imagem centralizada em div de tamanho dinamico

Iniciado por Kriptolix, 30 de Dezembro de 2014, 16:28

tópico anterior - próximo tópico

Kriptolix

Ola pessoal, estou desenvolvendo pagina em html5 para poder fazer com que minha raspberry pi consiga servir mídia para o meu chromecast (sim, eu sei que a salada de coisas é grande :), tenho conseguido avançar na lógica do app sem muitos problemas mas eu sou uma verdadeira negação em design, e não consigo fazer com que meu css faça o que desejo. Basicamente, quando o botão para iniciar o cast for pressionado, eu precisaria dar fullscreem em uma DIV contendo uma imagem correspondente ao conteúdo (crio a imagem com ffmpeg a partir do arquivo de vídeo).

O problema é que não consigo fazer com que a imagem fique centralizada na DIV considerando que o tanto o tamanho da DIV quanto o da imagem podem variar. O meu objetivo é usar essa pagina como controle remoto pro conteúdo no meu celular (o que ela já faz, mas sem nenhuma elegância :), por isso precisaria centralizar a imagem na div para que ela pudesse ser vista tanto em portrait quanto em landscape, ocultando as sobras  da imagem quando em landscape (overflow: hidden ?).

Tentei ser claro mas não sei se consegui, enfim, o resultando que busco é mais ou menos assim:

http://turbo.paulstamatiou.com/uploads/2013/08/pstam_s4_netflix_chromecast.jpg

o que não funcionou:



body {
  width:96%;
  height:100%;
  background-color:#F2F2F2;

}

#castingScreen {
display: block;
width:100%;
height:100%;
background-color:blue; //usado so pra testar
background-image:url('../work/snap01.png');  //é uma imagem de 1280x554
background-position:center;  //também tentei cover
background-repeat: no-repeat;
overflow: hidden;
}


ps: Não postei o código html pq é uma simples DIV no body.
pps: quando eu chegar a um beta vou disponibilizar o código no GIT, ele vai funcionar em qualquer linux, provavelmente no mac, e futuramente vou adicionar o suporte ao ruindows.
Ubuntu Linux 10.10

irtigor


Kriptolix

Obrigado pela resposta mas não funcionou (eu já tinha ate tentado como camada, mas como seu código estava diferente do meu eu tentei novamente), no pc a imagem ficou perfeita, mas ao rodar na resolução do celular ela se distorce (principalmente no portrait), ai é que mora o problema, eu ate sei fazer isso no pc, mas quando o conteúdo é acessado pelo telefone destrói meu layout, e isso sem falar nos outros problemas bizarros que acontecem nos outros elementos da div quando ela entra em fullscreem :), mas enfim, vlw pela tentativa, vou continuar tentando aqui também.
Ubuntu Linux 10.10