Como centralizar uma imagem dentro de uma div?

Nossa, pesquisei muito pra conseguir descobrir isso...

Tenho uma div e dentro dela uma imagem....

E essa imagem é maior que a div... então quero que o que seja maior que a div, desapareça...

Para isso é fácil, basta colocar na sua div via CSS:

overflow: hidden;

Isso eu copiei da capa (cover) das páginas do Facebook, dei um inspecionar elemento e vi como era feito.


Mas no meu caso só isso não era suficiente, pq eu queria que a imagem ficasse centralizada dentro da minha div...

Então é necessário dar um

top: -50px

ou um

margin-top: -50px

ou ainda com porcentagem: 10% por exemplo


Mas pra mim ainda não tinha dado certo... pq a imagem era dinâmica e podia ter vários tamanhos... então tive que adicionar esse CSS na imagem:

position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

E então funcionou :)


Se o seu caso for centralizar horizontalmente e não verticalmente, provavelmente vai ter q usar left ao invés de top e translateX ao invés de translateY... mas não testei isso...


Como cada caso é um caso, talvez você tenha que adicionar um

min-height: 200px;

na sua imagem, não necessariamente 200px mas o tamanho da sua div, isso faz com que imagens menores q o tamanho da div estiquem... mas tem que ver se é esse comportamento que você quer..


No meu caso ainda tive que usar media query pois queria alguns comportamentos diferentes no mobile/tablet/desktop... a div tinha tamanho diferente em cada device...


Bom, basicamente é isso.. Mais detalhes deem uma olhada no código do cover em qualquer perfil do Facebook e vejam esse artigo que foi onde achei a solução: http://jonrohan.codes/fieldnotes/vertically-center-clipped-image/


Abraço!
Adriano Schmidt