如何按比例缩小<img>元素，将其 WxH 中较短的设置为固定数字？

Question

html:

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

css：

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

假设图像大小大于50x50，有没有任何方法可以按比例缩小图像，使其宽度和高度中较短的一个变成50px？请注意，图像可以是纵向的，也可以是横向的。

Answer 1

首先用javascript加载图像以获取其真实尺寸。

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

然后确定哪一个的高度更大，并使用比例进行相应的调整。

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

然后使用jQuery将图像插入到DOM中。

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

Answer 2

将图像的宽度除以高度，这就是比例。然后找到最大的尺寸，如果是宽度，则设置宽度=50*比例，高度=50；如果是高度设置，则高度=50/比例，宽度=50。你需要Javascript代码吗？

Answer 3

在保持纵横比的同时，不能仅用CSS将图像约束为固定宽度和高度的矩形。如果您需要这样做，它将是JavaScript或服务器端解决方案。

如果你只设置了一个宽度，那么高度将被设置为保持纵横比，同样只是一个高度，但这不会迫使图像放入框中，因为你不知道宽度和高度哪个最大。

如果您想要服务器端的解决方案，请查看ImageMagick，否则，请考虑将jQuery作为客户端解决方案。JQuery提供了一个简单的API，让您可以获得任何元素的维度，然后您可以用程序缩放这些维度。ImageMagick的新版本还提供了简单的调用，可以将图像放入矩形中。