Le Hollandais Volant#6660 - Note CSS3 : redimentionner une image automatiquement
Pour qu’une image soit automatiquement redimensionnée, pour remplir 100% de la hauteur ou 100% de la largeur, la première des deux contraintes atteintes, tout en conservant un ratio 1:1 et sans javascript, voilà :
HTML :
<div><span></span></div>
CSS :
div span {
background: url(mon_image_ici) no-repeat center center;
background-size: contain;
}
Voilà ce que ça donne quand la largeur est la première atteinte (en bas) et quand la hauteur est la première atteinte (en haut) : http://lehollandaisvolant.net/img/css-background-size.jpg
#balèze
En fait, les deux mots clés possibles sont contain (l’image est toujours contenue dans la boîte) et cover (l’inverse : l’image recouvre toujours l’ensemble de la boîte).
ÉDIT : seul inconvénient, les petites images seront elles aussi agrandies. Fuck.
HTML :
<div><span></span></div>
CSS :
div span {
background: url(mon_image_ici) no-repeat center center;
background-size: contain;
}
Voilà ce que ça donne quand la largeur est la première atteinte (en bas) et quand la hauteur est la première atteinte (en haut) : http://lehollandaisvolant.net/img/css-background-size.jpg
#balèze
En fait, les deux mots clés possibles sont contain (l’image est toujours contenue dans la boîte) et cover (l’inverse : l’image recouvre toujours l’ensemble de la boîte).
ÉDIT : seul inconvénient, les petites images seront elles aussi agrandies. Fuck.