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

我已经旋转图像（它应该与css旋转）。对于任何类型的移动设备，我都需要在全屏上显示它（因此我不能在这里使用固定宽度和固定边距）。图像的每一面都应有10px的边距

我不能这样做，因为旋转功能增加了图像两侧（左侧和右侧）的不可见间隙。您可以在JSFIDLE上看到这种效果，图像不会粘贴到屏幕的左边框

你知道怎么做吗？谢谢

<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);
}

img{
-moz变换：旋转（-90度）；
-webkit变换：旋转（-90度）；
-ms变换：旋转（-90度）；
变换：旋转（-90度）；
}

我改变了你的小提琴，现在它可以在更小的设备上旋转。 只要更改HTML小提琴屏幕的大小，就可以改变效果

解决方案：

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

---

在使用媒体查询和已旋转到100%宽度和高度的图像的不同版本重新开始旋转之前，会计算图像的大小。然后只需添加10像素的边距。任何低于660px的查询都可以。如果您不熟悉，请在此处查看媒体查询：