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

【问题标题】：How can I proportionally scale down an <img> element with the shorter of its WxH set to a fixed number?如何按比例缩小 <img> 元素并将其 WxH 中较短的设置为固定数字？
【发布时间】：2012-01-05 03:08:31
【问题描述】：

html:

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

css:

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

假设图像尺寸大于 50x50，有什么方法可以按比例缩小图像，使其宽度和高度中的较短者变为 50px？请注意，图片可以是纵向或横向的。

【问题讨论】：

标签： javascript html css

【解决方案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;" />');

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

如果您只设置一个宽度，那么将设置高度以保持纵横比，同样只设置一个高度，但这不会强制图像适合一个框，因为您不知道哪个最大，宽度或高度。

如果您想要服务器端的东西，请查看 ImageMagick，否则，请考虑使用 jQuery 作为客户端解决方案。 JQuery 提供了一个简单的 API，让您可以获取任何元素的尺寸，然后您可以通过编程方式对其进行缩放。较新版本的 ImageMagick 还提供了简单的调用，可让您将图像放入矩形中。

【讨论】：