html - 在没有 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 是不可能的:

Rotated elements in CSS that affects their parent's height correctly