Fórum Centralizar imagem dentro de uma DIV #466428

09/01/2014

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á.

Carlos Magno

Curtir tópico

+ 1

Responder

Post mais votado

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?

Joel Rodrigues

Responder

Gostei + 1

Mais Posts

09/01/2014

Leandro Chiodini

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

Responder

Gostei + 0

09/01/2014

Carlos Magno

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:

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

Responder

Gostei + 0

09/01/2014

Leandro Chiodini

Estrando mesmo colocando
position Absolute?

att
Chiodini

Responder

Gostei + 0

09/01/2014

Carlos Magno

Colocando absolute ou relative da no mesmo.

Responder

Gostei + 0

10/01/2014

Joel Rodrigues

Opa, qual é o objetivo? Não serviria colocar a imagem como background e usar o background-position?

Responder

Gostei + 0

10/01/2014

Carlos Magno

Caro Joel....não tinha pensando nisso. Vou testar. Caso dê certo retorno aqui.

Responder

Gostei + 0

10/01/2014

Carlos Magno

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.

Responder

Gostei + 0

10/01/2014

Joel Rodrigues

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>

Responder

Gostei + 0

10/01/2014

Carlos Magno

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>

Responder

Gostei + 0

10/01/2014

Joel Rodrigues

Dessa forma a imagem aparece como?

Responder

Gostei + 0

11/01/2014

Carlos Magno

Não aparece....fica somente um fundo branco.

Responder

Gostei + 0

13/01/2014

Carlos Magno

Joel.....agora deu certo....eu estava errando o caminho da imagem....rsrsrsr

Brigadão pela ajuda, Joel.

Pode colocar como resolvido

Responder

Gostei + 0

13/01/2014

Joel Rodrigues

Show de bola. Fico feliz por ter ajudado de alguma forma.

Tópico concluído.

Responder

Gostei + 0