Just a quick post about something I've gotten working over at 2D Forever.
With the recent realign of 2D Forever, something I focused on was making the website scale to whatever resolution you're viewing it at. I wanted to do this to allow the images to be an appropriate size for your screen, so that you're not:
- a) Trying to view a large image on a small screen (lots of scrolling!)
- b) Having to view a small image on a large screen (lots of squinting!)
To achieve this, the images are simply scaled up to a percentage of the screen size. Thanks to Safari's image smoothing this looks fantastic, however on other browsers you're left with a distorted looking pixelated image.
The technicalities are thus:
- A Flash object is placed over the original image, inheriting it's size and position;
- The original image URL is passed to the Flash, which then renders the image with smoothing;
- The original image is duplicated; the duplicate is made invisible and placed over the Flash, again inheriting the original size and position.
Point 3 is an important one. I didn't want to stop people being able to right click and save the image - or even to disable any of their expected right click options.
I'll expand on this at a later date, and maybe even release a version for public use with some documentation. For now you can view it in operation at 2D Forever.
Update (20th October '09)
As browsers have matured the problem primarily remains for IE, a discussion on a solution without Flash can be found here: Fluid Images.
Read the comments or see my most recent example of this technique.
Update (24th October '07)
The duplicate image isn't created anymore as the original is now used to cover the Flash. This gives a better view when you have css styling turned off, and there will be no repeated content if you're using a screen reader.
Here's the code for the Flash. As I wanted to use Flash's inbuilt scaling, getting the width and height to display correctly was tricky - I ended up having to hard code the width and height set on the stage (either through the compiler or the IDE):