Question

我想旋转风景图像，使其在2面板视图中以纵向显示。原始的景观图像仍将在单个面板视图中使用-因此，更改原始文件是不可行的。

问题在于图像的大小是在旋转之前设置的，因此DOM根据“预旋转”状态对事物进行间隔。有什么办法

在js中旋转图像方向（我希望不使用库，但愿意）
确定元素处于“旋转后”状态的大小？

下面是我当前的代码（仅在2个面板视图中包含旋转的图像）-后面是指向更详细的Codepen示例的链接（包括所需渲染的更多上下文）

如果有帮助：我正在React上进行实际项目。

.spread {
  display: flex;
  width: 50%;
  border: 2px solid green;
  height: 250px;
  align-items: center;
  justify-content: center;
}

.frame {
  border: 2px solid red;
  height: 80%;
  display: flex;
}

img {
  align-self: center;
}

.portrait {
  height: 100%;
  width: auto;
}

.ldsc {
  width: 100%;
  height: auto;
  max-width: 312px;
  min-width: 298px;
}

.ldsc.port {
  transform: rotate(90deg);
}

<div class="spread">
  <div class="frame port">
    <img class="ldsc port" src="https://picsum.photos/300/200" alt="portraitImg" />
  </div>
  <div class="frame port">
    <img class="portrait" src="https://picsum.photos/200/300" alt="portraitImg" />
  </div>
</div>

Try It!

Answer 1

JavaScript可以通过两种方式旋转图像：使用CSS和在画布内旋转。第一种解决方案与您的解决方案相似，第二种解决方案非常棘手，对您的情况不利。
第二种解决方案很有可能。
可以使用其他解决方案，将图像设置为正方形background-position:contain作为背景。并将Square div放入垂直面板。基本上是纯CSS。

Answer 2

这是另一种解决方案。只要您其他图像的比例保持不变，它将起作用。只需将其添加到CSS的末尾，或替换为.ldsc.port{...

.ldsc.port{
    transform: rotate(90deg) scale(1.5);
}
.frame.port {
  overflow:hidden;
}

在渲染之前旋转图像？

2 个答案: