javascript - Creating Thumbnails of different sized images - Stack Overflow

I am trying to making thumbnails of user submitted images that could be all different sizes, but when i am trying to do is:

Use the shorter dimension of the image to fill the space allowed for the image. (if the image is 500x350 and the thumbnail size was to be 250x250 then the image height would fill the thumbnail) then I'm trying to center the image in the other dimension. I'm having trouble doing this and I don't know if I should be using CSS or Javascript. Any suggestions would be great.

Solution: I got it to work how I wanted with this.

    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");
            }
        }); 
    }

I am trying to making thumbnails of user submitted images that could be all different sizes, but when i am trying to do is:

Use the shorter dimension of the image to fill the space allowed for the image. (if the image is 500x350 and the thumbnail size was to be 250x250 then the image height would fill the thumbnail) then I'm trying to center the image in the other dimension. I'm having trouble doing this and I don't know if I should be using CSS or Javascript. Any suggestions would be great.

Solution: I got it to work how I wanted with this.

    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");
            }
        }); 
    }

• javascript
• html
• css
• image
• thumbnails

Share Improve this question Follow edited Apr 7, 2012 at 3:46 Adam M. asked Apr 6, 2012 at 22:07 Adam M.Adam M. 3111 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I had similar problem, but the solution was about to crop right and left margin, while the image should be centered. My solution is in this JS Fiddle: http://jsfiddle/david_binda/9tTRQ/1/

It is quite simple, you need a two image wrappers and simple CSS.

HTML

<div class="thumb-wrapper">
   <a href="" title="" class="img">
      <img src="http://upload.wikimedia/wikipedia/mons/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;
}​

Set max-width: 250px; max-height: 250px; in the image's CSS. The browser does the magic for you.

You could also use html5 canvas elements and the translate method

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

since the resizing is implemented in the browsers engine it might be much faster then your native javascript implementation, especially if it es to a lot of images on one page.