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

Question

下面是将两张图片相互比较的代码。它使用.animate()方法。它工作正常，但有一个问题，有时候这一行中的乘法因子var multiply = val * 2;可能远高于2，它会将第二张图像从窗口框架中吹出来。

解决方案是，当它开始变得对于屏幕来说太大时，它会冻结第二张图片的最大尺寸并开始缩小第一张图片，以便保持准确的比例比较。我怎么做？

var val = 100;

$("#enlarge").click(function(){
var multiply = val * 2;
$("#whitesphere1").animate({height:val,width:val});
$("#whitesphere2").animate({height:multiply,width:multiply})
}); 

#comparison {
  position: absolute;
	padding: 0px;
	height: 300px;
	width: 500px;
}

#whitesphere1, #whitesphere2 {
	margin: 0px;
	padding: 0px;
	height: 80px;
	width: 80px;
	float: left;
	margin-left: 10px;
}

div img { width:100%; height:100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<button id="enlarge">Enlarge</button>

<div id="comparison">
   <div id="whitesphere1"><center><img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Sphere-with-blender.png"/></center></div>
   <div id="whitesphere2"><center><img src="https://upload.wikimedia.org/wikipedia/commons/7/7a/Sphere-with-blender.png"/></center></div>
</div>