我正在尝试弄清楚如何根据屏幕尺寸旋转 div 中的图像。
基本上有这样的设置:
<div> <div with arrow pointing right > <div>
在流体行(引导程序)中,我需要箭头图像旋转 90 度到向下位置,因为在移动设备中时,div 会堆叠。
我考虑过使用空白
<div>
和背景图像和媒体查询来更改图像,但是必须有一个具有设置像素尺寸的空白<div>
并不是很好(或者是吗?)。
另一个想法是在
<img>
内有一个 <div>
箭头,也许可以使用 jQuery 根据屏幕大小旋转它,但似乎很 OTT,并且可能超出我的能力来弄清楚如何做到这一点。
任何建议或提示都将受到欢迎。也许我错过了一些非常简单的东西。
@Stuart 的解决方案效果很好——这是使用 CSS 的另一种可能性。这不一定是更好的答案,只是不同而已。
https://codepen.io/panchroma/pen/MWZKgwJ
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 */
}
}
祝你好运!
如果您使用两个不同的图像创建两个独立的相同元素,您可以将其中一个设置为以一种尺寸显示并隐藏另一个,反之亦然。
例如:
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;}
}