时间戳

首页 > 解决方案 > 设置转换后图像的宽度和高度：旋转

css - 设置转换后图像的宽度和高度：旋转

问题描述

我有一个宽度：190px 和高度：260px 的 div，我在该 div 上分配了 img 标签，当我上传显示图像之前的图像时，之后我旋转图像但图像的宽度和高度没有改变div，我用过继承，关于位置和显示的一切，但一点都不好..上传后的状态 错误的事情

标签： csshtml

解决方案

我想出了一种自动化的方法，如下所示：

首先，我得到了图像的自然高度和宽度（来自 onload 触发器）：

naturalWidth = event.currentTarget.naturalWidth
naturalHeight = event.currentTarget.naturalHeight

然后我使用纵横比计算变换比例并生成如下变换样式（伪代码）：

对于 90 度（y 位移）：

  const scale = naturalWidth > naturalHeight ? naturalHeight / naturalWidth : 1
  const yshift = -100 * scale
  const style = "transform:rotate(90deg) translateY("+yshift+"%) scale("+scale+"); transform-origin: top left;"

对于 270 度（x 位移）：

  const scale = naturalWidth > naturalHeight ? naturalHeight / naturalWidth : 1
  const xshift = -100 * scale
  const style = "transform:rotate(270deg) translateX("+xshift+"%) scale("+scale+"); transform-origin: top left;"

希望这可以帮助。

推荐阅读