CSS: using -*-transform: rotate. alignment problems

Question

For my HTML picture viewer, I tried to autorotate some of my pictures via CSS -*-transform: rotate (by 90 degree). Because the width was bigger than the height of the pictures, the img element was too small and the rotated picture overlaid some of the text above and below.

To fix/workaround this issue, I created a div around it with the expected size. This lead to another problem that the image was also misplaced now. To fix/workaround this second issue, I created a second div around it which fixed the bad position.

One example (online: here):

• The picture has size w=1024, h=768.
• I am rotating it by 90 degree.
• The outer div: <div style="display:block; width:768px; height:1024px;">
• The inner div: <div style="position:relative; left:-128px; top:128px; display:block;">

This results in the correct / expected / wanted positioning and alignment.

I wonder though if there is more elegant / cleaner way to do this.

Answer 1

Try removing both divs, and setting a margin to your img:

margin:128px -128px;

It should work, and it's a bit cleaner.

Ps: 128 is (1024-768)/2.