我想弄清楚如何根据屏幕尺寸在 div 中旋转图像。
基本上是这样设置的:
<div> <div with arrow pointing right > <div>
在流畅的行( Bootstrap )中,我需要箭头图像旋转 90 度到下方位置,因为在移动设备中时,div 会堆叠。
我考虑过使用空白 <div>
和一个背景图像和媒体查询来改变图像,但必须有一个空白 <div>
设置像素尺寸不是很好(或者是吗?)。
另一个想法是有一个 <img>
<div>
内的箭头并可能使用 jQuery 根据屏幕大小旋转它,但似乎 OTT,并且可能超出我的理解如何去做。
任何建议或提示都将受到欢迎。也许我错过了一些非常简单的东西。
最佳答案
@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 */
}
}
祝你好运!
关于image - 根据屏幕尺寸旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14650878/