1485 sujets

Web Mobile et responsive web design

Design fluide

Bonjour à tous,
Je me colle à la version smartphone d'un site ( fait avec wordpress) et j'aimerai savoir comment faire pour que mes images ( dont la taille est codée en px par wordpress) s'affichent en largeur 100% sur un mobile, avec une hauteur homothétique...
Si quelqu'un à des idées..
Bonne journée

Thomas
avec l'attribut css width si il faut les aggrandir et/ou les réduire, ou bien max-width si tu souhaites ne faire que réduire celles qui sont trop grandes. L'attribut height sera automatique défini de façon à conserver les proportions.
merci.

j'ai mis :

  img {
     max-width:300px;
	  width:100%;
	height:auto;
  }


ça marche impec sur opéra mini mais pas sur safari ( suis sur iphone 4). Sur safari l'image est vraiment petite...
Salut,
thomas71 a écrit :
ça marche impec sur opéra mini mais pas sur safari ( suis sur iphone 4). Sur safari l'image est vraiment petite...

Essaie ceci :
img {
  max-width: 100%;
}

Modifié par Victor BRITO (06 Dec 2010 - 16:11)
A ben oui tu utilises le media handheld, qui est un peu dépassé à l'heure actuelle. Pour toucher un maximum de monde il faudrait faire comme ceci avec les media queries:

<style type="text/css" media="handheld, only screen and (max-device-width:500px), only screen and (max-width:500px), only screen and (-webkit-min-device-pixel-ratio: 2)">
		@import url(  http://www.lamenuiserie.org/wp-content/themes/menuiserie/style.css  );
	</style>

Modifié par Patidou (06 Dec 2010 - 16:33)
en fait j'utilise un plugin de worpdress qui détecte si je suis sur un mobile ou pas....
j' ai essayé ton bout de code mais ça ne change pas...
Administrateur
Patidou a écrit :
A ben oui tu utilises le media handheld, qui est un peu dépassé à l'heure actuelle.
Qu'est-ce que quoi ?
C'est pas parce que Moooooossieur iPhone ne l'utilise pas qu'il est dépassé. Il est sous-utilisé par les mobiles oui, et c'est une erreur de leur part.
Modifié par Felipe (06 Dec 2010 - 17:26)
Ah mais je suis tout à fait d'accord de le garder, d'ailleurs il est dans mon code. Je trouve aussi dommage qu'il n'ait pas été plus massivement adopté. Smiley smile
Sujet clos
Aller à