CODEWITHSUNDEEP
imagetwitter-bootstraprotationresponsive-design
alimacca
alimacca

Reputation: 33

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.

Upvotes: 2

Views: 23896

Answers (2)

David Taiaroa
David Taiaroa

Reputation: 25485

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

https://codepen.io/panchroma/pen/MWZKgwJ

HTML

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

CSS

@media (max-width: 480px) {
  .rotateMobile {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

Good luck!

Upvotes: 9

Stuart
Stuart

Reputation: 1168

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

Upvotes: 3

Related Questions