Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
Thread: Retina.js Problems with Image
11-25-2013, 12:40 AM #1
- Join Date
- Nov 2013
- Thanked 0 Times in 0 Posts
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:
<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.
11-25-2013, 01:00 PM #2
- Join Date
- Jan 2006
- Halle (Saale), Germany
- Thanked 1,229 Times in 1,199 Posts
Well, on the framework’s home page I read:
The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server.
For example, if you have an image on your page that looks like this:
<img src="/images/my_image.png" />
The script will check your server to see if an alternative image exists at this path: