twitter-bootstrap 根据屏幕大小旋转图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14650878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotate image depending on screen size
提问by alimacca
I am trying to figure out how to rotate an image in a div depending on the screen size.
我想弄清楚如何根据屏幕尺寸在 div 中旋转图像。
Basically there is this set up:
基本上有这样的设置：
<div> <div with arrow pointing right > <div>
in a fluid row (bootstrap) and I need the arrow image to rotate 90 degrees to a down position because when in a mobile the divs will stack.
在流体行（引导程序）中，我需要箭头图像旋转 90 度到向下位置，因为在移动设备中时，div 会堆叠。
I thought about using a blank <div>and a background-image and media queries to change the image, but having to have a blank <div>with set pixel dimensions isn't great (or is it?).
我想过使用空白<div>和背景图像以及媒体查询来更改图像，但是必须<div>具有设置像素尺寸的空白并不是很好（或者是吗？）。
Another thought was to have an <img>of the arrow inside the <div>and perhaps use jQuery to rotate it depending on screen size, but seems OTT, and possibly beyond me to figure out how to do it.
另一个想法是<img>在里面有一个箭头<div>，也许根据屏幕大小使用 jQuery 来旋转它，但似乎 OTT，而且我可能无法弄清楚如何去做。
Any suggestions or hints would be more than welcomed. Maybe I am missing something really simple.
任何建议或提示都将受到欢迎。也许我错过了一些非常简单的东西。
采纳答案by Stuart
If you create two separate identical elements with two different images, you could set one to diplay at one size and hide the other, and vice-versa.
如果您使用两个不同的图像创建两个单独的相同元素，您可以将一个设置为以一种尺寸显示并隐藏另一个，反之亦然。
For example:
例如：
Html
html
<img class="arrow" src="arrow.png" />
<img class="arrow90" src="arrow90.png" />
Css
css
.arrow{display:block;}
.arrow90{display:none;}
@media handheld, only screen and (max-width: 491px) {
.arrow{display:none;}
.arrow90{display:block;}
}
回答by David Taiaroa
The solution from @Stuart works well -- here's another possiblity that uses CSS. This isn't necessarily a better answer, just different.
@Stuart 的解决方案效果很好——这是使用 CSS 的另一种可能性。这不一定是更好的答案，只是不同。
http://jsfiddle.net/panchroma/u4zWp/
http://jsfiddle.net/panchroma/u4zWp/
HTML
HTML
<img src="../image1.jpg" class="rotateMobile">
CSS
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 */
}
}
Good luck!
祝你好运！
