Generate thumbnails from an image src

Question

I need to generate some thumbs based in a slideshow. This thumbs are generated directly/dinamically from the img src for each slide.

Now I'm generating a code like this for the thumbs gallery:

<ul id="galThumb">
<li id="thumb0"><img src="path-to-image" title="Image[0]"></li>
<li id="thumb1"><img src="path-to-image" title="Image[1]"></li>
<li id="thumb2"><img src="path-to-image" title="Image[2]"></li>
...
<li id="thumbn"><img src="path-to-image" title="Image[n]"></li>
</ul>

The li elements are left floated to get a horizontal line with them.

My problem is that the users can upload any image size and orientation images and I can't control correctly the aspect of the thumbs. I need all the thumbs has a particular size. 60x45px, for example.

When the user uploads a vertical image or any other image with a different ratio I have an irregular thumb line, where vertical images occupies a width and larger images are higher than others. How can I get an equal height and width thumbs without cropping the images? Or just cropping a bit to fit the verticals?

I search a lot here and I found some useful scripts, but none get that goal.

When an image doesn't fit the shape you have allocated for thumbs, you can either crop or stretch. Crop will cut off some of the content for viewing. Stretch will make the image seem stretched in one dimension. If you want all images regardless of shape to fill your 60x45px space, you have to choose one or the other of these two options. Which do you want to choose? — jfriend00, May 21 '12 at 15:40

score 1 · Answer 1 · answered May 21 '12 at 18:59

1

I like jQuery NailThumb. It's very customizable and easy to use.

answered May 21 '12 at 18:59

André Gil

624
7
13

score 0 · Answer 2 · answered May 21 '12 at 15:39

0

You can specify the width/height for each image using jQuery. Loop over the <li> elements, get the aspect ratios for each image, set the same height om each image and set the with according to the aspect ratio.

answered May 21 '12 at 15:39

Hidde

11,493
8
43
68

Drew Baker · Answer 3 · 2012-05-21T23:42:26.987

0

You could assign the images as backgrounds, then use CCS3 background-size: cover to make it fill the thumbs perfectly. Then use an IE filter for backwards compatibility.

This article explains it best: http://css-tricks.com/perfect-full-page-background-image/

This would not require any JavaScript.

edited May 21 '12 at 23:42

answered May 21 '12 at 15:42

Drew Baker

14,154
15
58
97

score 0 · Answer 4 · edited May 23 '17 at 12:23

Try this simple function i mentioned here: https://stackoverflow.com/a/14731922/382536

/**
* Conserve aspect ratio of the orignal region. Useful when shrinking/enlarging
* images to fit into a certain area.
*
* @param {Number} srcWidth Source area width
* @param {Number} srcHeight Source area height
* @param {Number} maxWidth Fittable area maximum available width
* @param {Number} maxHeight Fittable area maximum available height
* @return {Object} { width, heigth }
*/
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
}

Generate thumbnails from an image src

4 Answers4