Image plein écran gardant proportions

Question

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!!

PetoleTeam · Answer

Bonjour,
une des solutions est de mettre un DIV en fond de page avec une image dedans et sur le resize de la page tu modifies la largeur de l'image pour la faire coller au dimensions de la fenêtre d'affichage.

;O)

cs_samroud · Answer

Ok, donc avec du Javascript?

PetoleTeam · Answer

Bonjour,
donc avec du Javascript?
tout à fait
1/ récupération des dimensions de la fenêtre d'affichage...
2/ calcul des rapports hauteur/largeur, pour éviter les déformations disgracieuses...
3/ redimensionnement de l'image suivant les résultats...
4/ tu peux même recentrer l'image si pas pile poil...

Voila pour le principe...
;O)

lethyb · Answer

Bonjour,

Même si ce sujet date un peu, je voulais donner mon avis.
Avec le CSS3 pas besoin d'utiliser du javascript, de plus ce dernier peut être désactivé coté client.

Pour garder une image de la même taille quelque soit le "resize" de l'utilisateur, il suffit de définir votre CSS de cette façon :


body{
margin:0px auto;
}
.test{
margin:0px auto;
position:absolute;
height:100%;
width:100%;
background: url("../images/bg.png";
background-size:100% 100%;
}


CSS3 : background-size

cs_samroud · Answer

Ok merci pour le conseil CSS3. Mais es-ce que l'image gardera ces proportions??

lethyb · Answer

Ah mince, j'ai lu ton post à moitié 

Effectivement, les proportions de l'image ne sont pas gardées.
J'ai cherché pas mal de temps sur le sujet, j'espère qu'il y a une solution sans passer par le javascript ou le flash mais pour l'instant je n'en voit aucune.

Par contre j'ai une petite astuce si ça peut t'aider pour tout de même se rapprocher d'un résultat assez convenable malgrés le changement de résolution.
C'est une sorte de formule, sachant que tu dois tout de même choisir une résolution optimale parmi le 800*600, 1400*900 et compagnie.

Il faut savoir aussi que tu peux classer chaque résolution par famille.
par exemple : 800*600 et 1024*768 sont de la famille de type 1,3 (800/600=1024/768=1,3).
Donc si tu choisis d'optimiser ton image pour une résolution 800*600, elle le sera aussi pour la résolution 1024*768 et toutes les autres résolution de type 1,3.

Voici un petit topo sur les résolutions les plus utilisées :
type 1,3 : 800*600 / 1024*768 / 1280*1024
type 1,6 : 1280*1600 / 1440*900 / 1680*1050
type ~1,7 : 1366*768 / 1600*900 / 1920*1080

Aujourd'hui, le type 1,3 et 1,6 sont les plus utilisés, un petit plus pour le type 1,3 qui réunis tout de même 30% des utilisateurs dans le top 3. Cependant le type 1,7 se fait connaitre de plus en plus.

Regarde sur ce site, tu verras les résolutions les plus utilisées et leur évolution au fil du temps (par mois).

Aprés ça, applique cette formule magique  :
x = la largeur de la résolution choisie.
y = la hauteur de la résolution choisie.
imgX = largeur de ton image.
imgY = hauteur de ton image.

x/imgX = r1.
y/imgY = r2.

Généralement r1>r2 car des écrans plus haut que large c'est pas courant du tout ;).
(r2*100)/r1 = r3.
r3 étant le pourcentage à insérer dans l'attribut "background-size" du css.
Une fois l'image affichée, réglez de quelques pourcentages l'attribut à votre convenance car cette formule n'est pas parfaite non plus, elle se rapproche juste un peu du résultat optimal pour la résolution choisie.

Petit exemple : Je choisis d'optimiser mon image pour un affichage 1440*900. J'ai une image de 200*600.
-> 1440/200 = 7.2
-> 900/600 = 1.5
-> (1.5*100)/7.2 150/7.2 20.83 ~ 21%

Voici le code :

body{
margin:0px auto;
}
.test{
margin:0px auto;
position:absolute;
height:100%;
width:100%;
background: url("../images/test.jpg") no-repeat center;
background-size:21% 100%;
}


Ne pas oublier que le Css3 ne fonctionne pas en partie ou pas du tout selon le navigateur. Donc il faut aussi prendre en compte les statistiques des navigateurs les plus utilisés.

cs_samroud · Answer

Merci! Comme je suis graphiste, je dois et je veux absolument que les proportions soient gardées.... j'ai trouvé une bonne solution en javascript qui fonctionne à merveille!!

Image plein écran gardant proportions

7 réponses

Votre réponse

Discussions similaires