Applying a rotation filter in IE8 and changing the aspect ratio

Question

I have a style like this:

.vertical-rotate{
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, 
     M12=-1.00000000, M21=1.00000000, M22=0.00000000,DX=32,sizingMethod='auto expand');
}

And I apply it dynamically to an image:

$("#rotate").click(function(e) { 
   e.preventDefault();
   $("img").addClass("vertical-rotate"); });

The problem is, with non-square images, the DOM renderer doesn't seem to realize that the aspect ratio has changed. The image, which was previously centered, is now flush-right against its containing div.

This problem does not occur in IE9 or in real browsers (using their native rotate). Any ideas how I might tell IE8 to reposition the image properly?

Answer 1

Although IE 8 doesn't recognise the updated width and height of the images, you can mimic the new sizes by setting their margins:

$("#rotate").click(function(e) { 
   e.preventDefault();
   var img = $("img").addClass("vertical-rotate");

   // On IE 8, fake image size by applying margins
   if ( $.browser.msie && $.browser.version >>> 0 === 8 ) {
     $.each( img, function ( i, e ) {
       e.style.marginRight  = e.height - e.width + 'px';
       e.style.marginBottom = e.width - e.height + 'px';
     });
   }
 });

EDIT: I assume you are using jQuery. If it is not, the browser detection and each function may need some modifications, but the general idea is there.