www.webdeveloper.com
Results 1 to 3 of 3

Thread: Retina.js Problems with Image

  1. #1
    Join Date
    Apr 2012
    Posts
    12

    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).

    http://oi42.tinypic.com/sy1b8m.jpg

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

    http://oi44.tinypic.com/207wbde.jpg

    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:

    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
    Join Date
    Mar 2009
    Posts
    467
    I might be totally wrong here, but notice that in your HTML the width specifies 'px' whereas the 'height' does not.

  3. #3
    Join Date
    Apr 2012
    Posts
    12
    Quote Originally Posted by Tcobb View Post
    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.

    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles