Retina.js Problems with Image
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:
You can also view my temporary website at acmfootball.com/TEST.
<img src="images/global/acmfootballlogo.png" data-at2x="images/global/acmfootballlogo.png" width="180px" height="28">
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.
I might be totally wrong here, but notice that in your HTML the width specifies 'px' whereas the 'height' does not.
Just rectified that and unfortunately it doesn't make a difference.
Originally Posted by Tcobb
Something in that navigation bar is causing this to happen, and I can't work out what it is. The 'data-at2x=' should simply use the defined image when the device has double the number of pixels. The fact that it is making the image bigger than is set suggests something in the HTML/CSS code (relating to the navigation bar) is causing this. This issue does not happen for images in the main content area of my site.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)