Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    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">
    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.

  2. #2
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Halle (Saale), Germany
    Thanked 1,299 Times in 1,269 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:
    Perhaps that’s the problem?


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts