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

【问题标题】：CSS. Rotated image on the mobile screensCSS。移动屏幕上的旋转图像
【发布时间】：2015-03-17 18:27:31
【问题描述】：

我已经旋转了图像（应该用 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);
}

【问题讨论】：

图片的大小是在旋转之前计算出来的
我建议使用媒体查询和已经旋转以适应 100% 宽度和高度的图像的不同版本。然后只需添加 10 像素的边距。任何低于 660 像素的查询都应该这样做。如果您不熟悉这里的媒体查询：css-tricks.com/css-media-queries

标签： html css css-transforms

【解决方案1】：

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

解决方案：

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

【讨论】：