Centralizar imagem dentro de uma DIV
Ola pessoal.....venho pedir ajuda de vocês.
Pesquisei por toda net e até o momento as dicas que encontrei não satisfizeram meus interesses. Mas vamos ao problema
Eu tenho uma div com dimensões de width:220px; height:165px; e quero que dentro dela apareça uma imagem maior do que a div. Já consegui esconder o estouro e centralizar horizontalmente, mas não consigo centralizar a imagem verticalmente.
Alguém tem alguma dica valiosa que possa me ajudar?
Obrigado a qualquer ajuda desde já.
Pesquisei por toda net e até o momento as dicas que encontrei não satisfizeram meus interesses. Mas vamos ao problema
Eu tenho uma div com dimensões de width:220px; height:165px; e quero que dentro dela apareça uma imagem maior do que a div. Já consegui esconder o estouro e centralizar horizontalmente, mas não consigo centralizar a imagem verticalmente.
Alguém tem alguma dica valiosa que possa me ajudar?
Obrigado a qualquer ajuda desde já.
Carlos Magno
Curtidas 1
Melhor post
Joel Rodrigues
11/01/2014
Não aparece....fica somente um fundo branco.
Você já inspecionou o código do elemento após a página ser renderizada? Viu se a imagem realmente foi colocada como background?
GOSTEI 1
Mais Respostas
Leandro Chiodini
09/01/2014
Opa,
Boa tarde
Voce pode estar usando um CSS para fazer isso.
Codigo da sua imagem.
<img src="imagem.gif" id="centro" />
Na classe CSS
#centro {
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
voce pode trabalhar na propria Tag imagem
com a margim top
e margem button
mais acho mais organizado colocar em um CSS,
qualquer coisa posta ai.
Veja se te ajuda.
att,
Chiodini
Boa tarde
Voce pode estar usando um CSS para fazer isso.
Codigo da sua imagem.
<img src="imagem.gif" id="centro" />
Na classe CSS
#centro {
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
voce pode trabalhar na propria Tag imagem
com a margim top
e margem button
mais acho mais organizado colocar em um CSS,
qualquer coisa posta ai.
Veja se te ajuda.
att,
Chiodini
GOSTEI 0
Carlos Magno
09/01/2014
Opa Leandro....eu já havia tentado esta dica mas sem sucesso. Dessa maneira a imagem que quero centralizada fica jogada no canto inferior direito.
Veja só o código CSS da DIV:
Só lembrando que não quero que ela fique menor do que a DIV, Quero que ela apareça em tamanho normal dentro da DIV, mas só apareça a parte central da imagem.
Veja só o código CSS da DIV:
.boximgprod {
position:relative;
overflow:hidden;
width:220px;
height:165px;
clear:both;
padding-top:10px;
border:1px solid #999;
}
//Aqui a ID da imagem
#centrar {
position:relative;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
Só lembrando que não quero que ela fique menor do que a DIV, Quero que ela apareça em tamanho normal dentro da DIV, mas só apareça a parte central da imagem.
GOSTEI 0
Leandro Chiodini
09/01/2014
Estrando mesmo colocando
position Absolute?
att
Chiodini
position Absolute?
att
Chiodini
GOSTEI 0
Carlos Magno
09/01/2014
Colocando absolute ou relative da no mesmo.
GOSTEI 0
Joel Rodrigues
09/01/2014
Opa, qual é o objetivo? Não serviria colocar a imagem como background e usar o background-position?
GOSTEI 0
Carlos Magno
09/01/2014
Caro Joel....não tinha pensando nisso. Vou testar. Caso dê certo retorno aqui.
GOSTEI 0
Carlos Magno
09/01/2014
Joel, não deu certo. Acho que por que o a imagem é cadastrada em um banco de dados fiz um loop para retornar 4 imagens aleatórias e o css parece não aceitar isso.
A finalidade disso eh mostrar alguns produto no site da loja onde trabalho.
A finalidade disso eh mostrar alguns produto no site da loja onde trabalho.
GOSTEI 0
Joel Rodrigues
09/01/2014
Fiz um pequeno teste aqui e funcionou. É preciso ver se há alguma particularidade no seu caso para que não esteja funcionando. Aqui eu usei o seguinte código para teste:
<!DOCTYPE html>
<html>
<head>
<style>
#box{
height: 220px;
width:165px;
border:1px solid;
background-image:url('bg.jpg');
background-position: center
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>GOSTEI 0
Carlos Magno
09/01/2014
Bom Joel...dessa forma eu sei que funciona, mas preciso que seja uma imagem cadastrada e retornada dentro de um loop. Tipo assim.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php do { ?>
<div style="height: 220px; width:165px; border:1px solid; background-image:url('<?php $imagem; ?>'); background-position: center;">
</div>
<?php } while(); ?>
</body>
</html>
GOSTEI 0
Joel Rodrigues
09/01/2014
Dessa forma a imagem aparece como?
GOSTEI 0
Carlos Magno
09/01/2014
Não aparece....fica somente um fundo branco.
GOSTEI 0
Carlos Magno
09/01/2014
Joel.....agora deu certo....eu estava errando o caminho da imagem....rsrsrsr
Brigadão pela ajuda, Joel.
Pode colocar como resolvido
Brigadão pela ajuda, Joel.
Pode colocar como resolvido
GOSTEI 0
Joel Rodrigues
09/01/2014
Show de bola. Fico feliz por ter ajudado de alguma forma.
Tópico concluído.
Tópico concluído.
GOSTEI 0