Images stretching on emulator but not on browser?

Ionic Framework ionic-v3
1

I am building an app using IONIC 2. In an IONIC button, I am adding a custom image. I need to scale the image to be the same (/similar) size to the other icons, so I have the following 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);
   }

in browser:

on emulator:
enter image description here

Why is the key image stretching and how can I work around this? Any ideas would be much appreciated, as this has really caught me out.

2

Note I have also asked this on SO, I’ll update both threads if I get an answer. see here

3

Does anyone have any ideas?