étirer une <img> sans que celle ci soit déformée

Auteur
ezra	# 02 Feb 2012 - 20:01:42
3 Posts	Bonsoir, Le problème est simple, je voudrait faire en sorte d'avoir une image en background, qui s'étire selon la résolution de chacun, mais que son rapport largeur/hauteur de base, lui ne soit pas changé. Pour ce, j'ai utilisé une <img id="fond"> et mon css ressemble actuellement à ça : `img#fond { position:absolute; top:0; left:0; height:100%; width:100%; }` voila, comme on peut s'en douter l'image s'étire a volonté, mais se retrouvera trop déformée si un utilisateur à un écran vraiment large. si vous avez des propositions, en ce qui me concerne je crois que j'ai tout essayé, j'ai googlé a tout va, et je trouve rien non plus ici sur le forum d'alsa'. Alors à défaut de trouver une solution, je me suis dit : inscris-toi sur alsacréations c'est le moment. Merci d'avance.
3 Posts
Gothor	# 02 Feb 2012 - 21:17:08
71 Posts	Bonsoir ! Si tu veux mettre une image en fond, il faut d'abord utiliser la propriété `background-image` et non pas insérer ton image en HTML. Ensuite, tu peux jeter un oeil sur ce tutoriel. Gothor
71 Posts
ezra	# 02 Feb 2012 - 22:00:04
3 Posts	voila c'est exactement ça, merci beaucoup, je vais chercher dans cette direction la.
3 Posts
fvsch	# 03 Feb 2012 - 14:36:26
Administrateur 19899 Posts	Effectivement on utilisera background-image, et background-size:cover. (Voir l'exemple donné par Gothor pour la syntaxe exacte.) Par contre, background-size n'est pas compatible IE 7-8. J'en envie de dire que tant pis, ça peut se traiter en dégradation gracieuse. C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
Administrateur 19899 Posts
Prévenir un modérateur