图片角度调整 适配缩放 transform scale rotate

在某些情况下，我们常常需要对图片的角度进行调整并展现在页面上，比如常见的身份证图片。

以下是相关代码示例：

-webkit-transform:rotate(90deg);
transform:rotate(90deg);

然而，在调整后会发现，图片在 div 中的呈现与实际盒子大小并不一致。此时，若采用传统方法去获取宽高，会发现图片的宽高并不会因呈现的大小而改变。

这就需要通过 JavaScript 的原生方法来获取呈现后的宽高：

let _clientRect = Element.getBoundingClientRect();

接着，依据原始宽高与调整后呈现宽高的比例来确定 x 轴和 y 轴的缩放比例。

translateX = (originalWidth /_clientRect.width).toFixed(2);
let translateY = (originalHeight / _clientRect.height).toFixed(2);

最后设置：

display: inline-block;
transform:scale(${translateX},${translateY}) rotate(90deg);
-webkit-transform:scale(${translateX},${translateY}) rotate(90deg);