Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Levi Gonçalves

[Resolvido] Centralizar Imagem (foto) horizontalmente

Por , em Desenvolvimento frontend

Recommended Posts

Levi Gonçalves    0

Levi Gonçalves
Postado

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:

 

 

<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';

$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>

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tecnicamente, assim você consegue fazer oque você pediu:

left: <?php echo $left ?>px;
apesar de ser um poco feia essa solucao..

 

acho que o ideal, seria deixar o alinhamento a cargo do Javascript.

você capturaria o width em tempo de execucao, e ai, jogaria um valor de margin apropriado para centralizar esse elemento.

 

Fazer com positions dessa forma, eu nao recomendo.

Pode te trazer varios problemas, se nao tiver cuidado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RobertoPC    0

RobertoPC
Postado

Olá,

 

Olha um script que desenvolvi para o alinhamento:

 


<html>
<head>
	<title>...</title>

<script type="text/javascript">
<!--

	function alinhaIMG(){

		// tamanho do corpo do documento

		var ww = document.body.offsetWidth;

		// tamanho da imagem

		var wi = document.getElementById('imagem').offsetWidth;

		// margem lateral

		var ml = (ww - wi) / 2;

		
		document.getElementById('imagem').style.marginLeft = ml;


	}	
	

-->
</script>

</head>
<body onLoad="alinhaIMG()">

<img src="" style="width:300px; height:450px;" id="imagem">

</body>
</html>

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito