如何按比例缩小 <img> WxH中的较短者设置为固定数字？

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 50x50, 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

Divide the width of the image by the height, that's your ratio. Then find what's the largest dimension, if it's the width, set the width = 50 * ratio, and height = 50; if it's the height set it height = 50 / ratio and the width = 50. Do you need Javascript code?

Answer 2

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;" />');

Answer 3

You can't constrain an image to a fixed width and height rectangle, while maintaining aspect ratio, in CSS alone. If you need to do this, it will be either a JavaScript or server side solution.

If you set just a width, then the height will be set to maintain the aspect ratio, likewise just a height, but this will not force the image to fit into a box since you can't know which is greatest, the width or the height.

Check out ImageMagick if you'd like something server side, otherwise, consider jQuery for a client side solution. JQuery provides a simple API to let you get the dimensions of any element, which you can then scale programatically. Newer version of ImageMagick also provide simple calls which will allow you to fit an image into a rectangle.