CSS3 moderne (recommandé pour le futur et probablement la meilleure solution)
.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. */
}
Max. étirer sans recadrage ni déformation (peut ne pas remplir l'arrière-plan) : background-size: contain;
Force l'étirement absolu (peut provoquer une déformation, mais pas de recadrage) : background-size: 100% 100%;
"Ancien" CSS "toujours fonctionnel"
Image de positionnement absolu en tant que premier enfant du parent (positionné de manière relative) et en l'étirant à la taille du parent.
HTML
<div class="selector">
<img src="path.extension" alt="alt text">
<!-- some other content -->
</div>
Equivalent de CSS3 background-size: cover;
:
Pour y parvenir de manière dynamique, vous devrez utiliser l' opposé de l'alternative à la méthode contain (voir ci-dessous) et si vous avez besoin de centrer l'image recadrée, vous auriez besoin d'un JavaScript pour le faire de manière dynamique - par exemple en utilisant jQuery:
$('.selector img').each(function(){
$(this).css({
"left": "50%",
"margin-left": "-"+( $(this).width()/2 )+"px",
"top": "50%",
"margin-top": "-"+( $(this).height()/2 )+"px"
});
});
Exemple pratique:
Equivalent de CSS3 background-size: contain;
:
Celui-ci peut être un peu délicat - la dimension de votre arrière-plan qui déborderait le parent aura CSS défini à 100% et l'autre à auto.
Exemple pratique:
.selector img{
position: absolute; top:0; left: 0;
width: 100%;
height: auto;
/* -- OR -- */
/* width: auto;
height: 100%; */
}
Equivalent de CSS3 background-size: 100% 100%;
:
.selector img{
position: absolute; top:0; left: 0;
width: 100%;
height: 100%;
}
PS: Pour faire les équivalents de couverture / contenir de manière complètement dynamique (vous n'aurez donc pas à vous soucier des débordements / ratios), vous devrez utiliser javascript pour détecter les ratios pour vous et définir les dimensions comme décrit. ..