Images 100% déformées sur mobile android

Bonjour,

Je suis en train de finir un petit site mobile. A priori, tout est parfait sur iphone et sur PC.
Mais je viens de me rendre que sur android. Mes images alors fixées en width 100% et height 100% se déformaient..
La démo en live : http://www.mobile.lemoulindethuboeuf.com/index.php

Mes images sont codées comme cela en html :

<img src="img/logo.jpg" alt="" />

Et côté css, j'ai :

img {width:100%; height:100%;}

les images sont sur Android toute étirées en hauteur..

Côté meta, j'ai :

<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />

(c'est un tricks trouvé pour que mon menu positionné en "position:fixed" reste bien fixé sur mobile)

Merci pour vos réponses, ça commence à m'énerver ! sinon, je serais obligé de faire du media query en fixe, mais c'est dommage..
Modifié par Gogne (17 Nov 2013 - 23:32)

Bonjour,

Il est normal que tes images se déforment si tu écris

img {width:100%; height:100%;}

Puisqu'en faisant ça, tu dis à ton image de prendre toute la hauteur et toute la largeur de son conteneur, sans tenir compte des proportions de l'image.

Sur la page d'exemple que tu donnes, les images n'ont que le width de spécifié, la hauteur s'adapte proportionnellement.

Moi je mettrais plutôt :

img {
    max-width:100%; /* ne pixelise pas l'image si celle-ci est plus petite que la lagreur du conteneur */
    height: auto; /* là est le secret : s'adapte à la largeur en conservant le ratio */
}

Effectivement, en enlevant le height:100% ca fonctionne tres bien.

J'ai donc simplement specifié width:100% (idem au final que de mettre maw-width non ?). La hauteur se regle proportionnelement et se bloque du coup a la taille max d origine de l'image (enfin j'imagine).

Merci ++

Gogne a écrit :
J'ai donc simplement specifié width:100% (idem au final que de mettre maw-width non ?)

Non : si l'image est plus petite que le conteneur elle va devoir s'étirer pour atteindre les 100% de large. Dommage.

Le max-width donnait le même avantage sans cet inconvénient.