[RESOLU] Que faites-vous avec les dimensions de vos images sur mobile?

Bonjour,

Comment gérez-vous les images qui sont sur votre site web?
J'ai différentes grandeurs d'images qui sont plus que 300px de large.

Présentement j'utilise un css pour mobile et l'autre pour le reste.

<meta name="viewport" content="width=device-width, maximum-scale=1" /> 	
<link rel="stylesheet" media="screen and (max-width: 900px)" href="css/mobile.css" />
<link rel="stylesheet" media="screen and (min-width: 901px)" href="css/screen.css" />

Modifié par britanicus75 (04 Jan 2011 - 17:54)

Salut,

Dans ta feuille de style pour mobiles, essaies de procéder comme suit :

img {
  max-width: 100%;
}

Victor BRITO a écrit :
Salut,

Dans ta feuille de style pour mobiles, essaies de procéder comme suit :

img {
  max-width: 100%;
}

C'est une excellente solution pour commencer en effet !

Hello,

J'ai envie de partager une réflexion sur ce sujet, parce que je trouve qu'il n'est pas adapté d'utiliser seulement max-width:100% (en tout cas lorsqu'on travaille avec un design fluide).

En effet, une bonne pratique du dév mobile consiste à compléter les attributs width et height de la balise <img/> (ça permet au nav de prévoir l'espace occupé par les images avant même qu'elles ne soient chargées, au passage indispensable si vous vous risquez à utiliser des flottants ).

Si côté HTML on a :

<img src="img.jpg" width="XXX" height="YYY" alt=""/>

Et côté CSS :

img { max-width:100%; }

Il va y avoir un problème, parce que l'image va bien se "fluidifier" en largeur mais pas en hauteur, qui restera fixe à YYY pixels (les proportions ne seront pas conservées et l'image sera déformée).

Donc avec le même code HTML, j'ai testé ça :

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

On redonne à l'image sa capacité de fluidification (en "écrasant" les styles des attributs), tout en garantissant des dimensions maximales et proportionnelles, dépendantes du viewport. Et si j'en crois mon firebug, les dimensions initialement fixées dans le code HTML ont tout de même un impact avant le chargement des styles CSS.

Vous en pensez-quoi ?

BeliG a écrit :
Vous en pensez-quoi ?

J'en pense du bien, mais dans la plupart des cas, il serait possible de faire plus simple ainsi, non ?

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

Raphael a écrit :
J'en pense du bien, mais dans la plupart des cas, il serait possible de faire plus simple ainsi, non ?

Héhé oui.

J'ai raisonné trop théoriquement, sans penser à la pratique. En effet, les cas de figure sont rares où l'image doit s'adapter en hauteur au viewport (cas d'une navigation horizontale peut-être, ou d'une galerie d'images avec seulement une grosse photo à la fois).

Par contre c'est étrange, pour le fun j'ai testé ça (pour essayer de fluidifier par rapport à la hauteur plutôt qu'à la largeur) :

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

Mais ça ne semble pas fonctionner.

Merci pour les réponses,

J'ai testé les deux et ca fonctionne à merveille.

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