Ir para conteúdo

POWERED BY:

Arquivado

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

salamandra

Alinhamento de imagem vertical e horizontal

Por , em Desenvolvimento frontend

Recommended Posts

salamandra    0

salamandra
Postado

Olá, não estou conseguindo alinhar esta imagem na vertical e horizontal, tenho a necessidade de usar o max-height e max-width pois a largura e altura da imagem pode variar.

 

 

<div style="height: 180px; width: 228px; float: left;">
    <img src="teste.jpg" style="max-height:172px; max-width:220px; border: 4px solid white;" />
</div>

 

Alguém consegue alinhar essa imagem na vertical e horizontal dentro da div?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Garbin    30

Marcelo Garbin
Postado

Dae Salamandra, rsrsrs...

 

Fiz um exemplo aqui de como pode ser alinhada a img dentro da div...

 

Segue o exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical Horizontal - img</title>
<style type="text/css">
#cont-img{
	width:228px;
	height:180px;
	padding:4px;
	float:left;
	border:4px solid #999;	
}

.center-img{
	width:220px;
	height:172px;
	max-width:220px !important;
	max-height:172px !important;
	top:50%;
	left:50%;
	position:relative;
	margin-top:-86px; /*Metade do valor da altura da img*/
	margin-left:-110px; /*Metade do valor da largura da img*/
}
</style>
</head>
<body>
<div id="cont-img">
    <img src="teste.jpg" alt="teste" class="center-img" />
</div>
</body>
</html>

 


Seria isso? valeuu :joia:

Compartilhar este post

Link para o post
Compartilhar em outros sites

salamandra    0

salamandra
Postado

Grande Marcelo, é quase isso! infelizmente nesse seu exemplo as imagens perdem suas proporções.

O código teria de ficar assim:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical Horizontal - img</title>
<style type="text/css">
#cont-img{
width:228px;
height:180px;
padding:4px;
float:left;
border:4px solid #999;
}


.center-img{
max-width:220px !important;
max-height:172px !important;
top:50%;
left:50%;
position:relative;
margin-top:-86px; /*Metade do valor da altura da img*/
margin-left:-110px; /*Metade do valor da largura da img*/
}
</style>
</head>
<body>
<div id="cont-img">
    <img src="teste.jpg" alt="teste" class="center-img" />
</div>
</body>
</html>

 

Eu tirei o 'width:220px; height:172px;' do '.center-img'. Pois assim as imagens não pordem perdem as proporções, mass, elas não ficaram centralizadas agora :/

 

Mesmo assim te agradeço, mas, se você souber como alinhar nesse caso, pode postar aqui :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Garbin    30

Marcelo Garbin
Postado

hummm,, então tem imagens com tamanhos diferentes, isso? Acabei esquecendo desse detalhe... rsrsrs..

 

Vou ver o que posso fazer por aqui e posto posteriormente..

 

P.S.: Você pega essas imagens de um BD ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

salamandra    0

salamandra
Postado

Sim, as imagens tem tamanhos diferentes

 

Tranquilo, eu que te agradeço pela ajuda :D to precisando muito disso, se você puder postar posteriormente seria muito bom

 

 

Sim, as imagens são pegas do BD

 

 

 

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Dê um "display: inline-block;" para o contêiner principal;

Crie um contêiner extra em volta da imagem (span ou div, por exemplo) com os mesmos tamanhos do elemento acima (que é pai deste), e declare com "display: table-cell;";

Ainda nesta "extra", coloque "vertical-align: middle;" e "text-align: center;".

 

Sim, é gambiarra, mas funciona. :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcelo Garbin    30

Marcelo Garbin
Postado

Buenas Salamandra ( :huh:), hehehe....

 

Seguinte, fiz o código CSS com PHP, como você vai buscar o nome da imagem no banco de dados vai ficar tranquilo....

 

Segue o exemplo:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical Horizontal - img</title>
<style type="text/css">
#cont-ext-img{
display:table;
position:relative;
padding:8px;
float:left;
overflow:hidden;
border:2px solid #000;
}

#cont-img{
width:228px;
height:180px;
overflow:hidden; 
}

.preview{
position:relative; 
left:50%; 
top:50%;
margin:4px;
}

</style>
</head>
<body>
<div id="cont-ext-img">
  <div id="cont-img">
  <?
      $img_nome  = "teste.jpg"; //variavel com nome da imagem do BD
      $diretorio = "./imagens"; //variavel com o local do diretorio das imagens
      
      //Calculo para centralizar imagem na div dinamicamente//
      
      /* A função getimagesize() irá determinar o tamanho de qualquer arquivo de imagem GIF, JPG, PNG, SWF, SWC, PSD, TIFF, BMP, IFF, JP2, JPX, JB2, JPC, XBM, ou WBMP e retornar as dimensões juntamente com o tipo de arquivo e a altura/largura para usar dentro de uma tag HTML IMG.
      fonte: http://php.net/manual/pt_BR/function.getimagesize.php */
      
      $imnfo = getimagesize($diretorio."/".$img_nome);
      $img_w = $imnfo[0];//largura
      $img_h = $imnfo[1];//altura
      $mW = $img_w/2; //pega a metade da largura
      $mH = $img_h/2;	//pega a metade da altura
  ?>
      <img src="<?=$diretorio?>/<?=$img_nome?>" alt="" style="margin-left:-<?=$mW?>px;margin-top:-<?=$mH?>px;" class="preview" />
  </div>
</div>
</body>
</html>

 

Fiz 2 div, uma é o contêiner externo que vai englobar a outra div para deixar uma margem em branco com o padding, a outra div é da imagem...

 

 

Verifica ae e de um Feedback pra ver se deu certo ou não dessa forma... valeuu :thumbsup:

 

 

p.s.: se funcionar ai, qualifica meu post, clica no up verdinho aqui do lado direito inferior... :D

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