js 图片/div 宽高等比自适应

业务前提概述

往canvas添加图片的时候，图片要能够正好在canvas里面，等比缩放适应。
错误效果：

正确效果：

思路

先提前规定几个名词

• imgH 图片的高度
• imgW 图片的宽度
• targetHeight 目标容器的高度
• targetWdith 目标容器的宽度
• hScale=targetHeight /imgH (以宽为基准的缩放比例)
• wScale=targetWdith /imgW (以高为基准的缩放比例)
• scale=Math.min(hScale,wScale)

只要取以宽为基准的缩放比例和以高为基准的缩放比例的最小值，作为最终的缩放比例即可
然后图片的宽高就应该是imgH*scale 和 imgW*scale

扩散下

• 不仅可以是图片，也可以是div
• 目标容器可以是不同端的浏览器pc,ipad,手机等

比如说

canvas的预览图片是塞在轮番图div里面的，要在pc和手机上都能等比看到效果。

pc端

手机端