Tested and working in IE7, IE7 emulation, IE8, Firefox, Opera, Safari(PC), Chrome, Flock, SeaMonkey, Avant and Maxthon.
IE6 shows all the images correctly sized but does not center the image when it is smaller than the containing box.
This demonstration is produced in collaboration with Román Cortés who came to me with the idea and a working demonstration that had a few flaws.
I have taken the code and restyled it to produce a version that now works in all modern browsers including IE6 and IE7.
With this method an image that is smaller than the box size will be centerd horizontally, one that is the same size as the box will fit exactly, an image that is taller (portrait) than the box will shrink to fit the box height and will be centered horizontally and finally an image that is wider (lanscape) than the box will shrink to fit the box width.
14th April 2010
CSS simplified to remove need for separate IE stylesheet
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.