Façon robuste d'afficher une image avec une dimension fixe

Question

Disons que nous avons une image téléchargée par l'utilisateur, le script de téléchargement limite le mb mais pas la taille de l'image (donc pourrait être une proportion, 600X200,200X350, et ainsi de suite. ..).

Je montre déjà cette image en une partie sur mon site en utilisant le twitter bootstrap image handler écrit sur css, c'est bon pour une photo de profil, le problème est que maintenant je veux que cette image soit une couverture (comme facebook/twitter cover image), mon site est réactif donc la largeur de la couverture est 900px ou 100% si la résolution de l'écran est inférieure à 900px de large. La hauteur est toujours fixée à 200px. Donc je sais qu'il y a un moyen de contrôler l'affichage d'image correct en utilisant CSS (peut-être avec jquery aussi) mais Im pas un dev de front, Im un php dev et je ne veux pas utiliser des scripts côté serveur pour ce faire. Donc je suis à la recherche de suggestions ou de morceaux de codes (css, javascript) pour commencer, je crois que cela doit être une solution déjà faite pour cela, mais je n'en trouve pas sur google. Merci pour tout conseil!

Answer 1

Je voudrais certainement pas conseiller pour utiliser une solution css seulement. Pas même une solution côté client si les images téléchargées peuvent avoir une résolution. Vous souhaitez utiliser un script php pour enregistrer les versions redimensionnées des images téléchargées et les diffuser au client. Soit comme image de fond d'un bloc et utilise css (pas de navigateur croisé) ou comme balise img et utilise js pour redimensionner.

css:

.myselector{ 
    background-size: cover; 
} 

ou js (jquery):

$(function(){ 
    var containers = $('.myselector'), w = $(window); 
    function onResize(){ 
     //resize code 
     containers.each(function(){ 
      var $this = $(this), 
       w = $this.width(), 
       h = $this.height(), 
       ratio = w/h, 
       $img = $('img',$this); // assuming there is only one img in each container 
      $img.css({'width':'auto','height':'auto'}); 
      var iw = $img.width(), ih = $img.height(), iratio = iw/ih; 
      if(iratio>ratio){ 
       $img.css({ 
        height:'100%', 
        width:'auto', 
        marginLeft: (w-iw*(h/ih))/2 
       }); 
      } 
      else{ 
       $img.css({ 
        width:'100%', 
        height:'auto',, 
        marginTop: (h-ih*(w/iw))/2 
       }); 
      } 
     }); 
    } 
    w.bind('resize',onResize); 
    //resize on each image load event 
    $('img',containers).bind('load',onResize); 
    onResize(); 
}); 

est ici un violon de travail: http://jsfiddle.net/kHxd2/2/

écouteur d'onload de l'image pourrait avoir besoin tweeking réagir lorsque les images mises en cache sont rendu dans IE: http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/

Vous pouvez également définir des règles CSS pour les navigateurs non-js rares ... (.myselector img {width: 100%;})

EDIT: récipient css:

.myselector{ 
    width: 100%; 
    max-width: 900px; 
    height: 200px; 
    margin: auto; /* centering */ 
    overflow: hidden; 
} 

voir violon mise à jour: http://jsfiddle.net/kHxd2/3/

La meilleure solution consiste à incorporer les conteneurs d'image dans une enveloppe principale div et appliquer les règles css ci-dessus à ce gros conteneur.

Voici un code utile pour prendre soin de Redimensionnement côté serveur: http://www.9lessons.info/2009/03/upload-and-resize-image-with-php.html

Answer 2

Vous devez mettre cette image en arrière-plan image, et ensuite utiliser le style:

background-image: url(url/to/your/image.png); 
background-size: cover; 

Answer 3

Il y a une propriété CSS3 appelé background-size:cover; et background-size:contain;. Vous voudrez peut-être les utiliser pour répondre à vos besoins.

contiennent

Indique que l'image de fond doit être mis à l'échelle pour être aussi grande que possible, tout en assurant à la fois ses dimensions sont inférieures ou égales aux dimensions correspondantes de la zone de positionnement de fond.

couverture

Indique que l'image de fond doit être mis à l'échelle pour être aussi petit que possible tout en assurant à la fois ses dimensions sont supérieures ou égales aux dimensions correspondantes de la zone de positionnement de fond.