Ir para conteúdo
Fórum Script Brasil
  • 0

Centralizar Imagem (foto) horizontalmente

Levi_gns

Perguntado por Levi_gns,

 Share

Pergunta

Levi_gns

Levi_gns

Postado
Postado (editado)

Olá pessoal,

Estou desenvolvendo um site de classificados em php e achei um recurso legal em css para exibir fotos. Tudo está perfeito, porém como as imagens (fotos) são de tamanhos diversos (largura e altura), não consigo centralizar as fotos horizontalmente. Segue abaixo a idéia de como elaborei o código.

<style type="text/css">
#janela {
position:absolute;
top: 380px;
left: 200px;
width: 350px;
z-index: 1000;
visibility:hidden;
height: 344px;
}
</style>

<script>
function exibe() {
document.getElementById("janela").style.visibility="visible"; 
}
</script>

<body>
<div id="janela"> <img src= <?php echo 'fotos/'.$foto; ?> height="360"> /div>
<img id="imageprin" src= <? echo echo 'fotos/'.$foto; ?> onclick="exibe();" height="60">
</body>

Eu já tenho uma solução para esse problema, só não sei se é possível:

Preciso saber como pegar o valor de uma variável php e transferi-la para uma variável css, assim eu pegaria a largura da foto (ex: 500 px) e jogaria esse valor devidamente calculado em “left:”.

Pergunta: é possível passar o valor de uma variável php para css? Se não for possível, alguém poderia me dar alguma dica de como solucionar esse meu problema de centralização?

Obrigado.

Editado por Jonathan Queiroz
Adcionar tag's (Jonathan)
Link para o comentário
Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

  • 0
Matheus Matos

Matheus Matos

Postado
Postado

Olá Levi, tudo beleza?

bem, troque apenas a parte do seu css por esse abaixo:

<style type="text/css">
#janela {
position:absolute;
top: 380px;
left: 50%;
margin-left: -100px; /*é aqui que tá o segredo, primeiro eu disse que o css que a margem devia ser 50% da resolução (horizontal) do monitor do usuário, e agora disse que a margem da foto devia ser a metade dela, ou seja -100px*/
width: 350px;
height: 344px;
z-index: 1000;
visibility:hidden;
}
</style>

bem testa aí pra ver se deu certo!

Vlw

Matheus Matos

TeTheus!

Link para o comentário
Compartilhar em outros sites
  • 0
Levi_gns

Levi_gns

Postado
  • Autor
Postado

Olá Matheus, tudo beleza amigo, e tu?

tentei fazer o que me disse, mas a imagem continua partindo de um ponto específico, melhor dizendo:

50% do "left" imagino que seu equivalente seria mais ou menos uns 500 pixels, menos os 100 pixels (ou 200, ou 300) do "margin-left" continuou do mesmo jeito, mas obrigado pela sua dica.

Link para o comentário
Compartilhar em outros sites
  • 0
Levi_gns

Levi_gns

Postado
  • Autor
Postado (editado)

Meu site ainda não está pronto, estou desenvolvendo ainda.

Segue abaixo o resumo do código um pouco melhor do que eu passei anteriormente... Copie-o e veja como funciona, é só mudar o nome dos arquivos de imagens em $foto1, $foto2 e $foto3.

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head> 

<style type="text/css">
#janela1 {
    position:absolute;
    top: 100px;
    left: 200px;
    width: 350px;
    z-index: 1000;
    visibility:hidden;
    height: 344px;
}

#janela2 {
    position:absolute;
    top: 100px;
    left: 200px;
    width: 350px;
    z-index: 1000;
    visibility:hidden;
    height: 344px;
}

#janela3 {
    position:absolute;
    top: 100px;
    left: 200px;
    width: 350px;
    z-index: 1000;
    visibility:hidden;
    height: 344px;
}
</style>

<script>
function exibe1() {
document.getElementById("janela1").style.visibility="visible"; 
document.getElementById("janela2").style.visibility="hidden";
document.getElementById("janela3").style.visibility="hidden"; 
}

function exibe2() {
document.getElementById("janela1").style.visibility="hidden"; 
document.getElementById("janela2").style.visibility="visible";
document.getElementById("janela3").style.visibility="hidden"; 
}

function exibe3() {
document.getElementById("janela1").style.visibility="hidden"; 
document.getElementById("janela2").style.visibility="hidden";
document.getElementById("janela3").style.visibility="visible"; 
}
</script>


<body onLoad="exibe1()">

<?php
$foto1 = 'DSC09643.JPG';  //mude aqui
$foto2 = 'DSC09659.JPG';
$foto3 = 'DSC09672.JPG';
?>

<div id="janela1"> <img src= <?php echo $foto1; ?> height="360"> </div>
<div id="janela2"> <img src= <?php echo $foto2; ?> height="360"> </div>
<div id="janela3"> <img src= <?php echo $foto3; ?> height="360"> </div>

<img src= <? echo $foto1; ?> onclick="exibe1();" height="60">   
<img src= <? echo $foto2; ?> onclick="exibe2();" height="60">   
<img src= <? echo $foto3; ?> onclick="exibe3();" height="60"> 

</body>
</html>

Editado por Jonathan Queiroz
Adcionar tag's (Jonathan)
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...