Javascript 缩放图像以最适合视口

假设我有一个任意大小的视口（例如，浏览器窗口）。我想缩放任意纵横比和分辨率的图像，以便以最大化分辨率的方式适应此视口内部

我很难让代码在图像太高太宽的情况下工作。我可以用什么公式来计算我应该按宽度还是按高度缩放这个任意图像

以下是我正在使用的代码：

var aspectRatio = imageWidth / imageHeight;
if(tooWide && tooTall)
{
    // Figure out if it's better to scale on height or width by 
    if((imageWidth - viewporthWidth) > (imageHeight - viewporthHeight))
    {
        adaptedWidth = (1.0 - padding) * viewporthWidth;
        adaptedHeight = adaptedWidth / aspectRatio;
    }
    else
    {
        adaptedHeight = (1.0 - padding) * viewporthHeight;
        adaptedWidth = adaptedHeight * aspectRatio;
    }
}
else if(tooWide)
{
    adaptedWidth = (1.0 - padding) * viewporthWidth;
    adaptedHeight = adaptedWidth / aspectRatio;
}
else if(tooTall)
{
    adaptedHeight = (1.0 - padding) * viewporthHeight;
    adaptedWidth = adaptedHeight * aspectRatio;
}
else
{
    adaptedWidth = imageWidth;
    adaptedHeight = imageHeight;
}

在某些情况下，特定大小的图像根本没有缩放。例如，当我的视口大小为1492 x 855时，3000 x 1997图像的大小将调整为1342 x 893。纵横比是正确的，但高度是错误的。这意味着嵌套if语句的条件是错误的（事实上，它的计算结果为1003>1104，这暗示我们应该按高度进行缩放）

我假设这意味着用于缩放图像的方程是不够的

---

旁注：此代码是用于缩放图像的JavaScript（通过图像元素上的

width

和

height

属性使用浏览器的本机缩放）。在上面的代码中，

padding

是在图像周围创建最小填充量的百分比（所以它不会占用整个视口）。我在代码中包含了这一点，因为默认的填充是0.10，这会影响我提到的数字。

您应该比较图像与视口的比率，而不是绝对差异

大致如下：

if((imageWidth / viewporthWidth) > (imageHeight / viewporthHeight))

这本质上是比较百分比差异而不是绝对差异。这很重要，因为当您缩放图像时，图像会缩小一个百分比，而不是宽度和高度的绝对值

编辑：

您可以在这里看到，这是一个代码示例：

更新后的代码：

在本例中，宽度的绝对差异较大，但高度的百分比差异较大。旧代码根据宽度缩放（错误），新代码根据高度缩放。

我的最终答案：

var aspectRatio = imageWidth / imageHeight;
var viewportRatio = viewportWidth / viewportHeight;
var adaptedHeight = imageHeight;
var adaptedWidth  = imageWidth;


if (viewportRatio > aspectRatio) // scale by width or height?
{   adaptedHeight *= viewportWidth / imageWidth;
    adaptedWidth  *= viewportWidth / imageWidth;
}
else
{   adaptedHeight *= viewportHeight / imageHeight;
    adaptedWidth  *= viewportHeight / imageHeight;
}  

---

当CSS可以为你处理这个问题时，为什么要使用JS呢？

img{height:auto；width:100%}

情况，不要太高。然后使用

背景尺寸：cover

作为例子。我很确定你可以在没有JS的情况下做你想做的事情。你能发布一个演示来重现这个问题吗？@elclanrs，这是我迄今为止写的非常粗糙的代码的演示。它本质上是一个“悬停在图像链接上以查看图像”脚本：至于为什么

背景大小：cover

不起作用，主要的问题是我仍然需要调整这个覆盖的“悬停div”的大小，以获得正确的大小。嗯，现在纵横比都很时髦（只更改了那行之后）。我看不出如果<代码>会如何影响您的纵横比。这不是计算的一部分。条件的内容可能是关闭的吗？在条件更改之前，它们似乎是正确的（除了偶尔会缩放的图像）“@Mike Example补充道，对我来说似乎很好。@Mike你jsbin中的代码与问题中的代码不同。影响纵横比的部分是，无论你是乘还是除aspectRatio，你都会改变。他们的问题是对的。当你需要做一些小的改变时，你不应该发布一个全新的答案。你可以简化y编辑现有答案。我建议删除其中一个答案。