Question

im using a image preview that allows me to add css styles to the previews that pops up.

now, some images are larger than the screen so you will just see a portion of them, while other images are very small so you don’t have to resize them.

is there a way to only resize the larger images and not touching the smaller ones, eg. only resize images with width or height larger than 400 px?

any other approaches to make the larger ones fit into the screen without affecting the smaller ones would be appreciated cause if i just use width=400px and height=400px all images will be at that size and the proportion will be wrong. and for smaller images you will se very large pixels.

thanks in advance

Answer 1

Seam carving javascript implementation is what I call smart resizing of images 🙂

Anyway, in Javascript, you can implement your logic depending on the width and height properties of the Image object.

Also have a look at this page, the author uses jQuery to resize images larger than specified dimensions.