Images stretching on emulator but not on browser?

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;

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.

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

Does anyone have any ideas?