Autor Tópico: Imagem centralizada em div de tamanho dinamico  (Lida 7312 vezes)

Offline Kriptolix

  • Usuário Ubuntu
  • *
  • Mensagens: 314
    • Ver perfil
    • Kriptolix
Imagem centralizada em div de tamanho dinamico
« Online: 30 de Dezembro de 2014, 16:28 »
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:

Código: [Selecionar]

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

Offline irtigor

  • Equipe Ubuntu
  • Usuário Ubuntu
  • *****
  • Mensagens: 4.344
  • Delete, delete, delete!
    • Ver perfil
Re: Imagem centralizada em div de tamanho dinamico
« Resposta #1 Online: 30 de Dezembro de 2014, 18:25 »
Coloca a imagem como camada: http://jsfiddle.net/cTxYc/2695/

Offline Kriptolix

  • Usuário Ubuntu
  • *
  • Mensagens: 314
    • Ver perfil
    • Kriptolix
Re: Imagem centralizada em div de tamanho dinamico
« Resposta #2 Online: 30 de Dezembro de 2014, 19:35 »
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