以不同方向显示图像，不使用javascript，而仅使用html和css

我有一张支票图像要显示，它水平方向是横向的，但需要垂直方向是纵向的。但该网站要求不支持JavaScript

例如，下面的一个，如果我应用旋转变换，图像将顺时针旋转90度，并按照我的意愿以纵向显示，但它也不再适合其父DIV。我怎样才能解决这个问题

第一组 一 形象 第2组

---

以下是它将如何与答案初稿中的代码相匹配：

.VerticalAlign {
height: 300px;
}

.rotate90 {
position: relative;
top: 50%;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform: rotate(90deg) translateY(-50%);
transform: rotate(90deg) translateY(-50%);
}

如果目的是让父级适应旋转的大小，那么没有JavaScript是不可能的：

您只需要将overflow:auto添加到包含的div中。 .旋转90{ -webkit变换：旋转90度； -moz变换：旋转90度； -o变换：旋转90度； -ms变换：旋转90度； 变换：旋转90度； } 第一组 一 形象 第2组

---

对不起，我不太明白。你的意思是@TheUknown有类似的效果，但假设你事先不知道图像的大小，所以你不能只给它80像素的上边缘。我已经更新了我的代码片段。我发现CSS属性image-orientation完美地解决了这个问题，即rotate90{image-orientation:90deg}。但只有mozilla的firefox支持它：这似乎不是一个可行的选择。我想，只留下几行JavaScript。进一步参考：ic，但如果可能的话，我希望看到没有滚动条的整个支票图像：好的，我将以没有JavaScript是不可能的单词作为答案，正如它所指出的那样。为后续行动干杯，希望有更好的解决方案。从文档流中提取的变换对于动画性能非常有用，但在这种情况下并不十分方便。