Javascript 如何按比例将图像与.animate（）进行比较？

下面是比较两个图像大小的代码。为此，它使用

.animate（）

方法。它工作正常，但有一个问题，有时此行中的乘法因子是

var multiply=val*2

会比2高得多，它会将第二个图像从窗口帧中放大

一个解决方案是，当屏幕开始变得太大时，它会冻结第二张图片的最大大小，并开始缩小第一张图片，从而保持精确的比例比较。我该怎么做

var=100；
$（“#放大”）。单击（函数（）{
var乘=val*2；
$（“#whitesphere1”）。设置动画（{height:val，width:val}）；
$（“#whitesphere2”）。设置动画（{高度：相乘，宽度：相乘}）
}); 
比较{
位置：绝对位置；
填充：0px；
高度：300px；
宽度：500px；
}
#白圈1，#白圈2{
边际：0px；
填充：0px；
高度：80px；
宽度：80px；
浮动：左；
左边距：10px；
}
div img{宽度：100%；高度：100%；}

扩大

我没有看到你在操作手册中提到的问题，请检查并阅读“创建一个最小的、可验证的示例”（creating a minimal，verifiable example）一节——这个示例似乎不可验证。我说的是“问题”，这更像是我想要的一个特性，当你说乘法因子大约是20时，第二个图像对于画布来说太大了，如图所示。我试图找出的是如何防止超出画布限制，然后开始将第一个图像大小减小到大小关系成比例精确的点通过取圆心，然后向圆心添加半径来计算圆/球体的最远点，直到半径的长度大于画布右上角和球体中间之间的距离，您可以继续增大球体。使用sqrt（（x2-x1）^2+（y2-y1）^2）获得两点之间的距离，其中x1，y1=球体中心，x2，y2=画布右上角。