CSSPLAY

CSS DEMOS › CSS play - F.a.S.T - Fit and Shrink Technique

Date : 11th April 2010

For all modern browsers

In collaboration with Román Cortés

The Problem

How to fit images of unknown sizes into fixed width and height boxes and maintain their aspect ratio using just CSS. The four sample images shown below are actual size.

The Answer

The boxes below are 180 pixels square and all use the same code and styling to show how the above images can be styled to fit, and shrink to fit.

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.

Information

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.

The idea is based on the problem of how to fit images of unknown size into a fixed size containing box, such as used when uploading images for display without having to use javascript to find and manipulate the image size.

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

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.