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

Question

I have a cheque image to display which is in the landscape orientation (horizontally), but need to be displayed in the portrait orientation (vertically). But the web site has requirements of not supporting JavaScript.

For example, the below one, if I apply rotate transform, the image will turn 90 degrees clockwise and display in the portrait orientation as I wish, but it also doesn't fit in its parent DIV anymore. How can I fix this?

 <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

Here's how it will fit (code taken from first draft of answer) :

.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/

If the intention is to let the parent adapt to the rotated size, that is not possible without JavaScript :

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

Answer 2

You just need to add overflow: auto to the containing 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>