Création de miniatures d'images de différentes tailles

Question

J'essaie de créer des vignettes à partir d'images soumises par les utilisateurs, qui peuvent être de tailles différentes, mais ce que j'essaie de faire, c'est.. :

Utilisez la dimension la plus courte de l'image pour remplir l'espace prévu pour l'image. (si l'image est de 500x350 et que la taille de la vignette est de 250x250, la hauteur de l'image remplira la vignette). J'essaie ensuite de centrer l'image dans l'autre dimension. J'ai du mal à le faire et je ne sais pas si je dois utiliser CSS ou Javascript. Toute suggestion serait la bienvenue.

La solution : J'ai réussi à le faire fonctionner comme je le voulais avec ceci.

    function sizeThumbs(){
        //resize each idea image so it is a good sized/centered thumbnail
        $.each($("img.thumbpic"), function() {
            var maxWidth = 250;
            var maxHeight = 150;
            var width = $(this).width();
            var height = $(this).height();

            if((width/maxWidth) < (height/maxHeight)){
                var multiplier = maxWidth/width;
                var newHeight = height * multiplier;

                $(this).css("width", maxWidth);
                $(this).css("height", newHeight);

                var heightD = (maxHeight - newHeight)/2;
                $(this).css("margin-top", heightD+"px");
                $(this).css("margin-bottom", heightD+"px");
            }else{
                var multiplier = maxHeight/height;
                var newWidth = width * multiplier;

                $(this).css("width", newWidth);
                $(this).css("height", maxHeight);

                var widthD = (maxWidth - width)/2;
                $(this).css("margin-left", widthD+"px");
                $(this).css("margin-right", widthD+"px");
            }
        }); 
    }

Answer 1

J'ai eu un problème similaire, mais la solution consistait à rogner les marges droite et gauche, alors que l'image devrait être centrée. Ma solution se trouve dans ce JS Fiddle : http://jsfiddle.net/david_binda/9tTRQ/1/

C'est assez simple, vous avez besoin de deux wrappers d'images et d'un simple CSS.

HTML

<div class="thumb-wrapper">
   <a href="" title="" class="img">
      <img src="http://upload.wikimedia.org/wikipedia/commons/4/40/Tectonic_plate_boundaries.png" alt="" />    
</a>
</div>

CSS

.thumb-wrapper{
    width: 250px; // desired thumbnail width
    height: 250px; // desired thumbnail height        
    overflow: hidden;    
    position: relative;
    margin: 0 auto;
}
.thumb-wrapper .img{
    display: block;    
    position: absolute;
    width: 350px; // should be wider than final thumbnail
    height: 250px; // desired thumbnail height
    left: 50%;
    margin-left: -175px; // half of above defined width eg. 350/2 = 175
}
.thumb-wrapper .img img{
    width: auto !important;
    max-width: 350px !important; // should be wider than final thumbnail
    min-width: 250px !important; // desired width of thumbnail
    height: 250px !important; // desired thumbnail height
    margin: 0 auto;
    display: block;
}​

Answer 2

Set max-width: 250px; max-height: 250px; dans le CSS de l'image. Le navigateur fait la magie pour vous.

Answer 3

Vous pouvez également utiliser les éléments html5 canvas et la fonction traduire méthode

http://www.html5canvastutorials.com/advanced/html5-canvas-transform-translate-tutorial/

Comme le redimensionnement est implémenté dans le moteur du navigateur, il peut être beaucoup plus rapide que votre implémentation javascript native, surtout s'il y a beaucoup d'images sur une page.