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 :
Code css :
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.