Применение фильтра вращения в IE8 и изменение соотношения сторон

Question

У меня есть такой стиль:

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

И я динамически применяю его к изображению:

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

Проблема с неквадратными изображениями в рендере DOMкажется, не понимают, что соотношение сторон изменилось.Изображение, которое было ранее центрировано, теперь выровнено по правому краю относительно содержащего его div.

Эта проблема не возникает в IE9 или в реальных браузерах (с использованием их собственного поворота).Любые идеи, как я мог бы сказать IE8, чтобы изменить положение изображения должным образом?

Answer 1

Хотя IE 8 не распознает обновленную ширину и высоту изображений, вы можете имитировать новые размеры, устанавливая их поля:

$("#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';
     });
   }
 });

РЕДАКТИРОВАТЬ: я предполагаю, что вы используете JQuery. Если это не так, обнаружение браузера и каждая функция могут нуждаться в некоторых модификациях, но общая идея есть.

Answer 2

Проблема в том, что осевая точка, на которой происходит вращение, отличается при использовании, например, матрицы. Вы действительно должны повернуть и перевести его.

Если вы уже используете JavaScript для добавления класса, вы также можете использовать плагин типа http://code.google.com/p/jqueryrotate/.