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: -50pxou um
margin-top: -50pxou 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