html - CSS。移动屏幕上的旋转图像

Question

http://jsfiddle.net/ajxqnqpo/

我旋转了图像(它应该用 css 旋转)。我需要在任何类型的移动设备上全屏显示它(所以我不能在这里使用固定宽度和固定边距)。图像每边应有 10px 的边距。

我做不到，因为旋转功能为图像边(左和右)添加了不可见的间隙。你可以在 jsfiddle 上看到这个效果，图像没有粘在屏幕的左边框上。

知道如何做到这一点吗？谢谢

<div>
    <img src="http://i.imgur.com/sakTcZr.jpg" />
</div>

img {
    -moz-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    transform: rotate(-90deg);
}

Answer 1

我改变了你的 fiddle ，现在它可以在更小的设备上旋转。 只需更改 HTML fiddle 屏幕的大小，您就可以达到效果。

解决方法:

   @media (max-width: 767px) {
        img{
         -moz-transform:rotate(-90deg);
        -webkit-transform:rotate(-90deg);
        -ms-transform:rotate(-90deg);
        transform: rotate(-90deg);   
        }
    }