I'm having issues with my website displaying an adapted image (for Retina devices) using the retina.js framework (available from http://retinajs.com/). This only seems to be affecting the image in the navigation bar for some reason. All the images I've tried in the main content area are fine.

If you look here, this is the size the logo should be. It is the standard image (which is why it looks low quality on a Retina device).


For some reason, when I use the adaption technique, it stretches the image. I've experimented with different sized images to no avail.


At the moment, I'm using EXACTLY the same image at the specified width/height, yet it's still blowing it up for the @2x part.

This is my code:

<img src="images/global/acmfootballlogo.png" data-at2x="images/global/acmfootballlogo.png" width="180px" height="28">
You can also view my temporary website at acmfootball.com/TEST.

So what I have gathered is that it is not the image's fault, it is not the general fault of the retina.js framework, it must be something to do with the HTML and/or CSS for that navigation bar.

Any help much appreciated for this annoying problem.