Question

我有旋转图像（它应该用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

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

解决方案：

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

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

1 个答案: