2

我试图弄清楚如何根据屏幕尺寸旋转 div 中的图像。

基本上有这样的设置：

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

在流畅的行（引导程序）中，我需要将箭头图像旋转 90 度到向下位置，因为在移动设备中时 div 会堆叠。

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

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

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

4

2 回答 2

7

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

祝你好运！

于 2013-02-06T16:49:00.360 回答
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;}
}
于 2013-02-03T13:58:32.993 回答