Jquery 在IE8中应用旋转过滤器并更改纵横比

我有这样一种风格：

.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如何正确地重新定位图像？

虽然IE8无法识别图像的更新宽度和高度，但您可以通过设置其边距来模拟新的尺寸：

$("#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。如果不是，则浏览器检测和每个功能可能需要一些修改，但总体思路是存在的。

问题是使用ie矩阵时，旋转发生的轴点不同。实际上，你必须旋转和平移它

如果您已经在使用javascript添加该类，那么您也可以使用类似的插件来提供帮助