Javascript 重新缩放画布元素上的图像对象，同时保持纵横比（iOS、Android）

我正在尝试加载一个HTML文件，它只做一件事：在画布元素上显示一个图像，该元素会自动调整大小，并自动重新缩放到相关设备的最大尺寸

例如：

• 用户按下设备上的按钮
• 设备打开WebKit/WebView以查看
• 该页面以所述设备上可能的最大高度/宽度比例显示image.png

要求：

• 实际的HTML文件应该只在正文中包含一个canvas元素
• 图像路径应该是动态的，并且在加载文件后解释宽度/高度
• 没有第三方依赖关系

我在这里尝试了一下，但遇到了一些问题：

if（缩放高度<缩放宽度）{
_config.newImgHeight=_cache.canvas.height；
_config.newImgWidth=Math.round（_config.newImgHeight*_config.imgWidthRatio）；
}else if（缩放宽度<缩放高度）{
_config.newImgWidth=\u cache.canvas.width；
_config.newImgHeight=Math.round（_config.newImgWidth*_config.imgheight比率）；
}

我拼凑的代码（见上面的jsfiddle）很有效，但我只能根据高度重新缩放。有没有关于我做错了什么或前进的最佳道路的想法

作为参考，我尝试将以下最好的组合在一起：

所以这里有一个问题：在HTML5中，将图像放置在画布上并根据当前屏幕大小使其自动重新缩放的最佳方法是什么？能够指定剪裁范围的奖励积分

if (scaledHeight < scaledWidth) {

    _config.newImgHeight = _cache.canvas.height;
    _config.newImgWidth = Math.round(_config.newImgHeight * _config.imgWidthRatio);

} else if (scaledWidth < scaledHeight) {

    _config.newImgWidth = _cache.canvas.width;
    _config.newImgHeight = Math.round(_config.newImgWidth * _config.imgHeightRatio);

}