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

Question

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

例如，在下面的例子中，如果我应用旋转变换，图像将顺时针旋转90度，并按照我的意愿以纵向方向显示，但它也不再适合其父DIV我该怎么解决

<div style='border:1px solid red;'>
DIV 1
</div>
<div style='border:1px solid red;'>
An
<img src="http://www.outreachaz.com/images/EMD%20Check.jpg" />image!
</div>
<div style='width:100%; border:1px solid red;'>
DIV 2
</div>

.rotate90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

<div style='border:1px solid red; margin-top:100px'>
DIV 1
</div>
<div style='border:1px solid red;'>
An
<img class='rotate90' src="http://www.outreachaz.com/images/EMD%20Check.jpg" />image!
</div>
<div style='width:100%; border:1px solid red;'>
DIV 2
</div>

Answer 1

以下是它的适用方式(代码取自答案的初稿)：

.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%);
}

http://jsfiddle.net/dxweu9v5/

如果目的是让父对象适应旋转后的大小，那么如果没有JavaScript:，这是不可能的

CSS中影响其父级的旋转元素'；s高度正确

Answer 2

您只需要将overflow: auto添加到包含的div中。

.rotate90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

<div style='border:1px solid red; margin-top:100px'>
DIV 1
</div>
<div style='border:1px solid red;overflow: auto'>
An
<img class='rotate90' src="http://www.outreachaz.com/images/EMD%20Check.jpg" />image!
</div>
<div style='width:100%; border:1px solid red;'>
DIV 2
</div>