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

祝你好运！

Answer 2

如果您使用两个不同的图像创建两个单独的相同元素，则可以将一个设置为一个尺寸并隐藏另一个尺寸，反之亦然。

例如：

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

根据屏幕尺寸旋转图像

2 个答案: