I am designing a photography site. The site's web pages will of course be dominated by photo images. I was thinking it would be impactful if the size the width of not only the web pages but the photos on the web pages grew or shrank depending on the user's screen resolution.
See StatCounter Global Stats - Browser, OS, Search Engine including Mobile Market Share
The way I would think you would do this is have a default size which fits the current most common resolution 1024x768 screens but try to detect their actual resolution. 1366 is on the rise and is about on par with 1280. Those widths are so close though, it would probably be a waste of time to create two different page/image sizes for those resolutions and just have two sizes for 1024 and 1280. So we would have a set of photos to fit the 1024 layout and a set to fit the 1280 layout.
This FLASH based site is sort of what I'm going for but it actually dynamically adjusts the photo sizes as you resize your browser! I'm not a fan of FLASH as typically they are slow to load for many users and are not search-engine friendly. Ideally I'd like to come close to what this site does but use XHTML/DHTML. Are there any really good DHTML based photo gallery viewers out there that might incorporate well so we don't have to re-invent the wheel here?
Has anyone done this or see any pitfalls or have any suggestions?