CSS3 moderno (recomendado para o futuro e provavelmente a melhor solução)
.selector{
background-size: cover;
/* stretches background WITHOUT deformation so it would fill the background space,
it may crop the image if the image's dimensions are in different ratio,
than the element dimensions. */
}
Máx. trecho sem corte nem deformação (pode não preencher o fundo) : background-size: contain;
Força o estiramento absoluto (pode causar deformação, mas sem corte) : background-size: 100% 100%;
CSS "antigo" sempre funcionando "maneira
Imagem de posicionamento absoluto como o primeiro filho do pai (posicionado em relação) e ampliando-o para o tamanho pai.
HTML
<div class="selector">
<img src="path.extension" alt="alt text">
<!-- some other content -->
</div>
Equivalente a CSS3 background-size: cover;
:
Para conseguir isso dinamicamente, você teria que usar o oposto do método de contenção alternativo (veja abaixo) e se precisar centralizar a imagem recortada, você precisaria de um JavaScript para fazer isso dinamicamente - por exemplo, usando jQuery:
$('.selector img').each(function(){
$(this).css({
"left": "50%",
"margin-left": "-"+( $(this).width()/2 )+"px",
"top": "50%",
"margin-top": "-"+( $(this).height()/2 )+"px"
});
});
Exemplo prático:
Equivalente a CSS3 background-size: contain;
:
Este pode ser um pouco complicado - a dimensão do seu plano de fundo que transbordaria o pai terá o CSS definido para 100% e o outro para automático.
Exemplo prático:
.selector img{
position: absolute; top:0; left: 0;
width: 100%;
height: auto;
/* -- OR -- */
/* width: auto;
height: 100%; */
}
Equivalente a CSS3 background-size: 100% 100%;
:
.selector img{
position: absolute; top:0; left: 0;
width: 100%;
height: 100%;
}
PS: Para fazer os equivalentes de cobrir / conter da forma "antiga" de forma completamente dinâmica (para que você não precise se preocupar com estouros / proporções), você teria que usar javascript para detectar as proporções para você e definir as dimensões conforme descrito. ..