Search code examples
imagetwitter-bootstraprotationresponsive-design

Rotate image depending on screen size

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

  • 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;}
}