Question

html:

<div id="thumbnail">
  <img src="xxx">
</div>

css:

div.thumbnail
{
border: 2px solid #ccc;
width: 50px;
height: 50px;
overflow: hidden;
}

Say the image size is greater than 50×50, is there any way that I can proportionally scale down the image so that the shorter of its width and height would become 50px? Note that the image can be in either portrait or landscape.

Answer 1

First load up the image in javascript to get its real dimensions.

var img = new Image('image.jpg');
var width = img.width;
var height = img.height;

Then determine which one has the larger height, and adjust them accordingly using the ratios.

if (width <= height) {
    var ratio = width/height;
    var newWidth = 50;
    var newHeight = 50 * ratio;
} else {
    var ratio = height/width;
    var newWidth = 50 * ratio;
    var newHeight = 50;
}

Then insert the image into the DOM using jQuery.

$('#imageContainer').append('<img src="' + img.src + '" style="width:' + newWidth + 'px; height:' + newHeight + 'px;" />');