Image proportionnelle a l'écran

Bonsoir,
En css3 tu dois pouvoir faire quelque chose comme ça !

background: url(url de ton image) no-repeat center fixed #000; // l'image doit être assez grande à l'origine quand même !
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */

non je ne pense pas

La solution de Lotfi est bonne sur tous les navigateurs modernes mais si tu souhaite supporter les vieux nav tu peux utiliser un plugin jquery. Par exemple : http://srobbin.com/jquery-plugins/backstretch/

Je pense que c'est mieux, mais ne correspond pas a mon besoins.
J'ai besoins d'afficher des thumbnails dans une sorte de listview, pour les mobiles, les tablettes.
Je connais approximativement les tailles horizontal d'écran entre 320px, 480, 640, 960 et 1024.

J'avais vu un tuto sur la typographie qui utilisais les polices proportionnel.
Existe t'il quelques chose d'équivalent pour les images ? pas forcement en CSS3, car je sais que les ecrans de blackberry ne tourne pas avec.

Ah ok j'avais cru que tu voulais afficher les images en plein écran selon les écrans autant pour moi!
Mettre les images en pourcentages seraient une solution?

Cela serait une solution en effet. Cela fonctionne t'il si on part d'une image basse resolution et qu'on agrandi quand la taille de l'ecran augmente.
cela evite de charger des grosses images pour les petits devices.

je pense que m'effet risque de rendre l'image très moche !! Tu devrait limite faire un css pour les mobiles et un pour les écrans.
Comme ça tu charges les images de qualité pour les écrans et de moins bonnes qualités pour les mobiles.

Et pour switcher d'un css a l'autre, ca fonctionnerais sur tout type de browser mobile ?

Je sais qu'il ya des fonctions PHP comme celle-ci qui peuvent te servir.
Si tu les utilise correctement tu doit pouvoir faire quelque chose de sympa!

<?php 
   function check_mobi() 
   {
      $mobile_browser = '0';

      if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|vodafone|o2|pocket|mobile|pda|psp|treo)/i',strtolower($_SERVER'HTTP_USER_AGENT'])))
      {
         $mobile_browser++;
      }

      if(((strpos(strtolower($_SERVER'HTTP_ACCEPT']),'text/vnd.wap.wml')>0) or (strpos(strtolower($_SERVER'HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0)) 
         or ((isset($_SERVER'HTTP_X_WAP_PROFILE']) or isset($_SERVER'HTTP_PROFILE']))))
      {
         $mobile_browser++;
      }

      $mobile_ua = strtolower(substr($_SERVER'HTTP_USER_AGENT'],0,4));
      $mobile_agents = array('acs-','alav','alca','amoi','audi','aste','avan','benq','bird','blac','blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt',
                        'inno','ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-','maui','maxo','midp','mits','mmef','mobi','mot-','moto',
                        'mwbp','nec-','newt','noki','opwv','palm','pana','pant','pdxg','phil','play','pluc','port','prox','qtek','qwap','sage','sams','sany',
                        'sch-','sec-','send','seri','sgh-','shar','sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-','tosh','treo','tsm-',
                        'upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp','wapr','webc','winw','winw','xda','xda-');

      if(in_array($mobile_ua,$mobile_agents)) $mobile_browser++;
      return $mobile_browser;
   }
   $is_mobile = check_mobi();
if ($is_mobile) 
{
    header("HTTP/1.1 301 Moved Permanently");
    header ('location: //url du site en version mobile');
}
 ?>

C'est le choix pour lequel j'ai opté même s'il y en a d'autre et c'est pas forcément la meilleure!
Ici la fonction check si c'est un mobile ou non et du coup tu choisi l'adresse en fonction.
Rien ne t'empêche de changer juste le fichier css qui est charger si c'est un mobile ou autre.
Cette fonction a quand même un gros inconvénient!
Elle met le IPAD dans le même panier ce qui fait qu'il faut prendre garde quand même a adapter le design pour cette machine aussi!!

Ah super merci

tu as ce petit site qui propose une solution alternative pour détecter les mobiles ou les tablettes etc ...
Mobile detect
tu as aussi focal-point css très léger permettant de "croper" une image en responsive!
En gros au lieu d'afficher l'image en plus petit et donc très peu visible s'il s'agit d'une image avec pas mal de détail. La tu peux "zoomer" sur les points important genre un personnage central ou autre!
Le lien github