Rotate image depending on screen size

Question

I am trying to figure out how to rotate an image in a div depending on the screen size.

Basically there is this set up:

<div> <div with arrow pointing right > <div>

in a fluid row (bootstrap) and I need the arrow image to rotate 90 degrees to a down position because when in a mobile the divs will stack.

I thought about using a blank <div> and a background-image and media queries to change the image, but having to have a blank <div> with set pixel dimensions isn't great (or is it?).

Another thought was to have an <img> of the arrow inside the <div> and perhaps use jQuery to rotate it depending on screen size, but seems OTT, and possibly beyond me to figure out how to do it.

Any suggestions or hints would be more than welcomed. Maybe I am missing something really simple.

Solution 1

If you create two separate identical elements with two different images, you could set one to diplay at one size and hide the other, and vice-versa.

For example:

Html

<img class="arrow" src="arrow.png" />
<img class="arrow90" src="arrow90.png" />

Css

.arrow{display:block;}
.arrow90{display:none;}

@media handheld, only screen and (max-width: 491px) {
    .arrow{display:none;}
    .arrow90{display:block;}
}

Solution 2

The solution from @Stuart works well -- here's another possiblity that uses CSS. This isn't necessarily a better answer, just different.

http://jsfiddle.net/panchroma/u4zWp/

HTML

<img src="../image1.jpg" class="rotateMobile">  

CSS

@media (max-width: 480px) {

.rotateMobile{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
}

Good luck!

Comments

[alimacca]

So So simple! Sometimes you can't see the woods for the trees! Many thanks Stuart! Much appreciated for the simple quick solution. Ali.

[Stuart]

No worries, glad I could help!

[alimacca]

Also good. Many thanks David. Spoilt for choice now huh... :)