在某些情况下,我们常常需要对图片的角度进行调整并展现在页面上,比如常见的身份证图片。
以下是相关代码示例:
-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);