Javascript 缩放图像以最佳匹配帧（div）的算法

我数学很差。我是一名网络程序员，通常我的工作不涉及太多的数学——更多的是将记录放入数据库，取出报告，制作那些花哨的网页等等。所以，我有一个任务对我来说是“数学”，但我希望你们中的一些数学人能从中受益，你会帮我的…这对你来说可能是个有趣的问题，对我来说太复杂了

所以最近我得到了这个任务，我得到了一个图像，上面有一个区域标记。该区域将标记为左上像素（x1，y1）和右下像素（x2，y2） 因此，对于图像，我有以下信息：

Image Width (iw)
Image Height (ih)
Image Area Top Left (x1,y1)
Image Area Bottom Right (x2,y2)

现在有了一组帧，每个帧都有

帧宽（fw）

和

帧高（fh）

。我的工作是找到一种最佳的方法来适应帧内的图像区域，而不需要在帧内有任何空白区域，如果需要，可以使用图像缩放

因此，我将其分解为以下任务：

图像区域（非填充图像）必须适合框架内部。如果

Image Area>Frame

，我应该将图像缩小（到a%）。如果

图像区域

我应该放大图像

缩放时，图像的纵横比不应受到干扰

我应该根据图像区域的长边缩放图像，以确保整个图像区域都在框架内。然而，当缩小图像时，由于极端的纵横比，有时这可能会导致另一侧在帧内出现空白。在这种情况下，我应该只缩小比例，直到一侧达到图像高度或图像宽度。这意味着图像区域没有完全显示在帧内，但这很好，因为第一优先级是帧内没有空白空间

现在我已经写了所有这些规则，我无法将其形式化为一个数学“公式”/“过程”/“规则集”，然后在我的软件中重新创建

对于缩放，我发现这个公式非常有效（在编程伪代码时）：

imageX=Image.width（）
imageY=Image.height（）；
imageRatio=imageX/imageY；
frameX=Frame.width（）；
frameY=Frame.height（）；
frameRatio=frameX/frameY；
if（成像比<井比）
{
比例=图像x/井x；
} 
其他的
{
比例=图像/井；
}
resizeX=（图像x/比例）；
resizeY=（图像Y/比例）；

然而，我不知道如何将其与整个画面联系起来

---

有人能帮我吗？我已经尝试了一个多星期都没有成功：（我使用的是PHP和Javascript，我对这两种技术非常熟悉。通常我可以解决我每天遇到的大多数涉及到它们的问题，但这是我的头绪。

听起来优先考虑的是先填充框架，这样你就不会有任何图像的字母框了

最好的方法是寻找较短的一面，并使用CSS拉伸该面以填充帧。这将保留纵横比，但可能会切断图像的一部分

$('img').css(this.width > this.height ? 'height' : 'width', '100%');

---

你不允许使用css吗？@KjellIvar-不，因为从技术上讲，我需要将重新计算的x1，y1和x2，y2以及比例因子传递给另一个API

$('img').css(this.width > this.height ? 'height' : 'width', '100%');