Question

我在数学方面很弱。我是一名网络程序员，通常我的工作不涉及太多的数学 - 更多的是将记录放入数据库，提取报告，制作那些花哨的网页等等。所以，我得到的任务是＆＃34; mathy＆＃34;对我来说，但是我希望它的孩子可以为你们中的一些人玩游戏，你们会帮助我......对你们来说这甚至可能是一个有趣的问题，对我来说太复杂了。 / p>

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

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

现在有一组帧，每帧都有Frame Width (fw)和Frame Height (fh)。我的工作是找到最佳的方法来适应帧内的图像区域而不在帧内有任何空白区域，如果需要，使用图像缩放。

所以我把它分解为以下任务：

图像区域（非填充图像）必须适合框架内部。如果Image Area > Frame，我应该缩小图像（降低到％）。如果Image Area < Frame我应该扩大Image Up。
缩放时，图像的宽高比不应受到干扰。
我应该根据图像区域的长边缩放图像，以确保整个图像区域位于帧内。但是，当缩小图像时，由于极端的宽高比，有时这可能会导致另一面在Frame内部留有空白。在这种情况下，我只应缩小，直到一侧达到图像高度或图像宽度。这意味着图像区域没有完全显示在框架内，但这很好，因为第一优先级是框架内没有空白区域。

现在我已经编写了所有这些规则，我无法将其正式化为一个数学＆＃34;公式＆＃34; /＆＃34;程序＆＃34; /＆＃34;规则集＆＃34;然后我可以在我的软件中重新创建。

对于缩放，我发现这个公式运行良好（编程伪代码）：

imageX = Image.width()
imageY = Image.height();
imageRatio = imageX / imageY;

frameX = Frame.width();
frameY = Frame.height();
frameRatio = frameX / frameY;

if (imageRatio < wellRatio) 
{
    scale = imageX / wellX;
} 
else 
{
    scale = imageY / wellY;
}
resizeX = (imageX / scale);
resizeY = (imageY / scale);

然而，我不知道如何将其与整体情况联系起来。

有人能帮帮我吗？我已经尝试了一个多星期不成功:(我使用PHP和Javascript，我非常精通这两种技术。通常我可以解决我遇到的大多数日常问题，但这是超过我的头脑。

Answer 1

听起来优先考虑的是首先填充框架，这样你就不会为任何图像添加信箱。

执行此操作的最佳方法是查找较短的一侧并使用CSS拉伸该侧以填充框架。这将保留纵横比，但可能会截断部分图像。

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

用于缩放图像以最佳拟合帧的算法（div）

1 个答案: