使用IONIC css在模拟器与浏览器中的图像渲染方式不同

Question

我正在使用IONIC 2构建应用程序。在IONIC按钮中，我正在添加自定义图像。我需要将图像缩放为与其他图标相同（/相似）的大小，因此我有以下css：

  .buttons .key img {
     max-width: 34px;
     max-height: 34px;
     height: auto;
     width: auto;
     vertical-align: center;
     transform:rotate(45deg);
      -moz-transform:rotate(45deg);
      -webkit-transform:rotate(45deg);
      -o-transform:rotate(45deg);
   }

浏览器中的

：

模拟器上的

：

为什么关键图像会延伸，我该如何解决这个问题呢？任何想法都会非常感激，因为这真的让我感到高兴。

注意：我在IONIC论坛上有一个阴影，here