I'm facing a challenge with displaying a rotated image on full screen for mobile devices without using fixed width or margin properties. The image should ideally have a 10px margin from each side.
The issue arises because the rotate function creates an invisible gap on the sides of the image, preventing it from aligning properly with the edges of the screen. This effect can be observed in the provided jsfiddle example.
Does anyone have suggestions on how to overcome this obstacle? Thank you!
<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);
}