How to align an image inside the div by rotating it 90 deg

Question

Hi i want to rotate the image by 90 deg and align the image inside the div borders. ie the outer div should expand automatically depending upon the height of the image. I have attached the JSFIDDLE with this.

<div style="float:left;border:1px solid #000;">
    <span style="float:left;transform:rotate(90deg); transform:50% 50% 0;">
        <img src="http://dimox.net/wp-images/css-border-radius.jpg"/>
    </span>
</div>

here is a read on that: http://stackoverflow.com/questions/16301625/rotated-elements-in-css-that-affects-their-parents-height-correctly — Nico O, Jun 06 '14 at 16:53
Going through the post Nico posted is probably your best bet. — The_DemoCorgin, Jun 06 '14 at 16:59
I've seen some charting libraries make some nice vertical text using SVGs. — mpen, Jun 06 '14 at 17:13

jamki · Answer 1 · 2014-06-06T16:53:32.190

0

You can use CSS3 to rotate the element 90deg (on modern browsers) - if you want to move the div as well you can apply the rotate to the div itself:

div img {
    -moz-transform: rotate(90deg) translateX(150px);
    -webkit-transform: rotate(90deg) translateX(150px);
    -o-transform: rotate(90deg) translateX(150px);
    -ms-transform: rotate(90deg) translateX(150px);
    transform: rotate(90deg) translateX(150px);
}

http://jsfiddle.net/L7pNa/3/

Or if you just want it to have a border - you can use a box shadow for that instead and remove the div markup.

edited Jun 06 '14 at 16:53

answered Jun 06 '14 at 16:48

jamki

51
4

i dont need border i want it to be inside div.for understanding i added border. – OCJP Jun 06 '14 at 16:49
So rotating it will cause the image to display off the page - so I've added the transform property to the img element. – jamki Jun 06 '14 at 16:54

score 0 · Answer 2 · answered Jun 06 '14 at 16:53

please try this code.

<div style="float:left;border:1px solid #000;overflow: auto;">
    <span style="float:left; -ms-transform: rotate(90deg); /* IE 9 */     -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */     transform: rotate(90deg);">
        <img src="http://dimox.net/wp-images/css-border-radius.jpg">
    </span>
</div>

How to align an image inside the div by rotating it 90 deg

2 Answers2