web-dev-qa-db-fra.com

Échelle CSS et image de recadrage au centre carré

J'ai donc une collection de vignettes dans mon application, qui est de la taille de 200x2. Parfois, l'image d'origine n'a pas ce rapport, je prévois donc de recadrer cette image en carré.

Actuellement, il étire simplement l'image pour qu'elle s'insère dans la miniature, alors disons que la taille de mon image d'origine est 400x8, puis l'image semble très écrasée. Je voulais rogner cette image pour qu'elle ressemble à la largeur/hauteur la plus courte, puis la recadrer en carré, donc dans mon exemple ci-dessus, elle sera rognée en 400x4.

Existe-t-il un moyen de le faire facilement via CSS ou dois-je utiliser une sorte de JS pour ce faire?

javascriptjqueryhtmlcssimage
29
adit

Vous pouvez le faire facilement en CSS si vous utilisez background-image.

.thumb {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 5px;
    border: 3px solid #c99;
    background-position: center center;
    background-size: cover;
}

Dans ce violon, la première image est 400x800, la deuxième image est 800x400:

http://jsfiddle.net/samliew/tx7sf

49
Samuel Liew

Mise à jour pour gérer les cas où la largeur de l'image est supérieure à la hauteur.

Vous pouvez le faire avec du CSS pur. Définissez l'élément conteneur de chaque image pour qu'il ait une hauteur et une largeur fixes et overflow: hidden. Ensuite, définissez l'image à l'intérieur pour avoir min-width: 100%, min-height: 100%. Toute hauteur ou largeur supplémentaire débordera le conteneur et sera cachée.

[~ # ~] html [~ # ~]

<div class="thumb">
    <img src="http://lorempixel.com/400/800" alt="" />
</div>

[~ # ~] css [~ # ~]

.thumb {
    display: block;
    overflow: hidden;
    height: 200px;
    width: 200px;
}

.thumb img {
    display: block; /* Otherwise it keeps some space around baseline */
    min-width: 100%;    /* Scale up to fill container width */
    min-height: 100%;   /* Scale up to fill container height */
    -ms-interpolation-mode: bicubic; /* Scaled images look a bit better in IE now */
}

Jetez un oeil à http://jsfiddle.net/thefrontender/XZP9U/5/

9
thefrontender

J'ai trouvé ma propre solution et j'ai pensé la partager ici au cas où quelqu'un d'autre trouverait ce fil. La solution background-size: cover est la plus simple, mais j'avais également besoin de quelque chose qui fonctionnerait dans IE7. Voici ce que j'ai trouvé avec jQuery et CSS.

Remarque: Mes images étaient des images de "profil" et devaient être recadrées en carrés. D'où quelques noms de fonctions.

jQuery:

cropProfileImage = function(pic){
    var h = $(pic).height(),
        w = $(pic).width();

    if($(pic).parent('.profile-image-wrap').length === 0){
                     // wrap the image in a "cropping" div
         $(pic).wrap('<div class="profile-image-wrap"></div>');
    }

      if(h > w ){
          // pic is portrait
          $(pic).addClass('portrait');
          var m = -(((h/w) * 100)-100)/2; //math the negative margin
          $(pic).css('margin-top', m + '%');    
      }else if(w > h){ 
          // pic is landscape
          $(pic).addClass('landscape'); 
          var m = -(((w/h) * 100)-100)/2;  //math the negative margin
          $(pic).css('margin-left', m + '%');
      }else {
        // pic is square
        $(pic).addClass('square');
      }
 }

// Call the function for the images you want to crop
cropProfileImage('img.profile-image');

CSS 

.profile-image { visibility: hidden; } /* prevent a flash of giant image before the image is wrapped by jQuery */

.profile-image-wrap { 
      /* whatever the dimensions you want the "cropped" image to be */
      height: 8em;
      width: 8em;
      overflow: hidden; 
 }

.profile-image-wrap img.square {
      visibility: visible;
      width: 100%;  
 }

 .profile-image-wrap img.portrait {
      visibility: visible;
      width: 100%;
      height: auto;
 }

 .profile-image-wrap img.landscape {
      visibility: visible;
      height: 100%;
      width: auto;
 }
1
Barry T. Smith