Selecionar centro da Imagem

[paulo_roll 0]

Boa tarde, pessoal!

 

Segue uma dúvida que estou quebrando um pouco a cabeça....

Gostaria de o usuário poder upar a imagem normalmente. Exemplo que ele poste 800x1200.

 

Mas no meu layout os thumbs tem 150x150, então eu gostaria de que essa imagem de 800x1200

aparecesse somente o centro dela no meu thumb de 150x150.

 

Alguém sabe como fazer isso via CSS?

[Vinicius Rangel 208]

background:url('imagem.png') center center; width:150px height:150px; display:block;

[paulo_roll 0]

Obrigado Vinicius, funcionou aqui, mas só a titulo de aprendizado, o center precisa ser duas vezes?

ou o primeiro center é para alinhar do top e o segundo pra alinhar do left?

[paulo_roll 0]

Apareceu outro problema...

Preciso fazer isso mas com uma tag img no meio...

 

 

<div style="aqui a div de 150x150 que seleciona 150x150 no centro da imagem abaixo">
    <img src="url-da-imagem" width='1200' height='800' />
</div>

[paulo_roll 0]

Opa, fazendo uns testes consegui. Vou deixar a solução pois pode ser útil para outros.

 

 

#centro {
width:150px;
height:150px;
overflow:hidden;
border:1px solid #000;
}
#centro img {
position:relative;    
left:-50%;
top:-80%;
}

 

 

 

 

<div id="centro"> 
    <img src="url-da-imagem" width='1200' height='800' /> 
</div>

 

 

[Vinicius Rangel 208]

o primeiro center indica posição horizontal enquanto o segundo indica posição vertical.

 

não são tão necessários..

 

qual foi o problema que apareceu no modelo que te apresentei?