1

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>
cateyes
  • 5,208
  • 2
  • 24
  • 31
  • Sorry, I didnt quite understand. You mean [like this?](http://jsfiddle.net/spsm6rkk/) – Polynomial Proton Apr 15 '15 at 01:10
  • @TheUknown something like this effect, but assume you don't know the size of your image beforehand, so you cannot just give it top margin of 80px. I've updated my snippet. Hopefully this explains. – cateyes Apr 15 '15 at 02:58
  • I found the CSS property `image-orientation` solves this perfectly, i.e., `.rotate90 { image-orientation: 90deg }`. But only mozilla's firefox supports it :( – cateyes Apr 15 '15 at 09:48
  • That doesn't seem like a viable option then. Leaves only a couple of lines of JavaScript, I reckon. – Shikkediel Apr 16 '15 at 06:56
  • For further reference: [CSS Image Orientation Lands in Firefox 26](http://sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation/) – cateyes Apr 18 '15 at 22:23

2 Answers2

0

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

Community
  • 1
  • 1
Shikkediel
  • 5,195
  • 16
  • 45
  • 77
  • Ok, I'll take the words "`that is not possible without JavaScript`" as **answer**, as it being pointed from [here](http://stackoverflow.com/questions/16301625/rotated-elements-in-css-that-affects-their-parents-height-correctly/16302202#16302202). – cateyes Apr 17 '15 at 00:20
  • Cheers for following up, wish there were a better solution though. Transforms being taken out of document flow is great for animation performance but not very convenient in this case. – Shikkediel Apr 17 '15 at 06:49
0

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>
kba
  • 19,333
  • 5
  • 62
  • 89