Just a quick experiment - I found myself needing to display a very wide panoramic image within a page, and found that all traditional methods had their problems. Just scaling the image down to fit meant all image detail would be lost, but using it at full width would blow out the rest of the layout and look a mess.
So I did a bit of digging around and found several people doing amazing things with the canvas object. Whilst impressive, their work was more processor intensive than I could justify for a simple image display, so I cobbled something together myself. The basic requirements were:
- Can incorporate extremely wide images
- Is flexible enough to display multiple image ratios
- Can be navigated via mouseOver or touch
- Does not grind to a halt on slower machines or mobile devices
- Degrades gracefully if a visitor's device does not support canvas
Basically this is simply a wide image loaded into the canvas, and then transformed according to the movement of the cursor. I've added a slight bowing effect to enhance the impression of panorama but this is simply an optical illusion.
This is not proper panoramic display - the image is not distorted as it is panned. Doing this properly in canvas would require webGL or a 3D library to handle the transformations, but there is another way. The Yahoo user interface blog has a neat example of faux-3d using multiple tiny image slices transformed to imitate 3d. However this approach is still processor-heavy and will not work well on mobile devices, so for now I'll stick with my basic version.
EDIT: This has now been updated to use a generic function to display any image within a specific canvas, along with some improvements in the code to help with touchscreen and tablet behaviours.