根据屏幕尺寸旋转图像

Question

我试图弄清楚如何根据屏幕大小旋转div中的图像.

基本上有这样的设置:

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

在一个流畅的行(引导程序)中,我需要箭头图像旋转90度到一个向下位置,因为在移动设备中div将堆叠.

我想过使用空白<div>和背景图像以及媒体查询来更改图像,但是必须有一个<div>设置像素尺寸的空白并不是很好(或者是吗？).

另一个想法是<img>在里面有一个箭头<div>并且可能使用jQuery根据屏幕大小旋转它,但似乎是OTT,并且可能超出我的想法如何去做.

任何建议或提示都会受到欢迎.也许我错过了一些非常简单的事情.

Answer 1

来自@Stuart的解决方案运行良好 - 这是使用CSS的另一种可能性.这不一定是更好的答案,只是不同.

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 */
}
}

祝好运!