I have a site I'm working on that is using retina.js (http://imulus.github.io/retinajs/) to switch out non-retina images for retina images specifically for retina devices. The site is a responsive HTML website (using Twitter Bootstrap). Here's the problem: when the page loads on retina devices, the image is switched out as it should be for retina devices switching over to the [email protected] which is fine so far. The problem is once I resize the browser's window (after the retina image has loaded) making the browser's width smaller, the image's width resizes fine, but the height stays the same effectively squashing the image vertically thus distorting the image. The same exact thing occurs on iPads and iPhones when changing the orientation.
Here is the before image:
And here is the image after I have resized by browser's width to be smaller:
Has anyone experienced this problem before?
As is usually the case, I think I found a solution moments after posting my question.
https://github.com/imulus/retinajs/issues/8
I'll test this shortly to see if it provides the fix.