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

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.

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.

voila c'est exactement ça, merci beaucoup, je vais chercher dans cette direction la.

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.