Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to rotate picture without overlapping?

I want to read Exif information and rotate them in my HTML file. I did like this. And it could rotate just fine, but when it comes two or more picture, they don't give my pictures enough space. Could I let them no overlapping and rotate them?

<HTML><HEAD>
<style type="text/css">
DIV.rotate {
-webkit-transform:rotate(30deg);
}</style>
</HEAD><BODY>
<div><p><DIV class="rotate"><img 
src="http://taufanlubis.files.wordpress.com/2008/05/google-picasa01.png">
</p></div>
<div><p><DIV class="rotate"><img 
src="http://taufanlubis.files.wordpress.com/2008/05/google-picasa01.png">
</p></div>
<div><p><DIV class="rotate"><img 
src="http://taufanlubis.files.wordpress.com/2008/05/google-picasa01.png">
</p></div>
</BODY></HTML>

Thank you very much.

like image 402
AmyWuGo Avatar asked Oct 22 '22 09:10

AmyWuGo


1 Answers

You can specify a height for the division almost same as image's width.

Demo here

Or you can specify a margin-bottom to the divisions.

Demo here

Cheers!!!

like image 73
Libin Avatar answered Oct 27 '22 09:10

Libin