Image plein écran gardant proportions

[samroud]

Bonjour,

je souhaite afficher une image en plein écran sur mon site internet. Par contre, je souhaite que l'image garde ses proportions... J'arrive à le faire en flash, mais je ne souhaite pas utiliser cette technique pour mon site...
Voici l'exemple d'un site internet qui utilise la technique que je souhaite reprendre:
http://www.neuchateltourisme.ch/

L'image de fond s'adapte automatiquement en fonction de la hauteur et de la largeur de la fenêtre...

Quelqu'un a-t-il donc la solution? Javascript, CSS,...?
Merci d'avance!!

 

[westindies972]

Salut

Dans ton site d'exemple neuchateltourisme.ch, ils utilisent la librairie javascript jQuery pour redimensionner l'image de fond selon la taille de la fenêtre du navigateur. Regarde la première fonction du fichier : http://www.neuchateltourisme.ch/lib/jquery/various.js

Autre piste : appliquer la propriété CSS 3 "background-size: 100%;", par contre ça ne fonctionnera que sur des navigateurs modernes.

 

[samroud]

Ok, merci, je vais regarder tout ça!

Sinon, j'ai trouvé cet exemple: http://css-tricks.com/perfect-full-page-background-image/
Mais l'image change de dimensions seulement sur la largeur...!

 

[westindies972]

Mais l'image change de dimensions seulement sur la largeur...!

Si tu regardes bien, dans ton exemple http://www.neuchateltourisme.ch/ l'image ne se redimensionne que sur la largeur, et pas sur la hauteur. Redimensionner l'image sur la hauteur laisserait apparaître des bords vides à gauche et à droite de l'image lorsque la hauteur serait trop faible.

L'exemple de CSS Tricks est pas mal, mais par contre nécessite l'utilisation de javascript pour une compatibilité IE6 (en utilisant jQuery ou Mootools).

Bon courage !

 

[samroud]

Le CSS3 serait ma solution: http://whereswalden.com/files/mozilla/background-size/bg-position.html

Mais quelle est la compatibilité pour utiliser cette nouvelle technologie...??

 

[westindies972]

Seuls les navigateurs modernes sont compatibles CSS 3, donc pas de soucis sur Safari, Firefox et Chrome dans les dernières versions. Pour Opéra je ne sais pas trop mais je pense que ça passe, par contre ça ne fonctionnera pas du tout sur IE, quelque soit la version (peut être avec la version 9 mais elle n'est pas encore disponible).

Pour ces derniers, il sera nécessaire d'utiliser javascript pour avoir une compatibilité, mais tout ne sera pas possible.

 

[samroud]

Ok, merci!