Using Percent

From CSS Discuss

Jump to: navigation, search

Sizing Images With Percentages

CSS has long had the ability to instruct browsers to size images by percentages, rather than absolute units or intrinsic size.

The percentage is interpreted based upon the size of the containing element, rather than as a percentage of the intrinsic size of the image.

Accordingly, an image 100px wide with a percentage size of 50% may be rendered many different sizes, depending upon the size of its container. And, if that element is itself sized with a percentage, it may also change depending upon screen resolution and the size of the browser window.

Surprisingly, this amazingly liquid feature has not been more widely used. The sites linked below use variations on this generic CSS:

div {width: 50%; }

div img {width: 50%;}

Example sites: (These links are not "spam" - they are the only active sites known to this writer which use this technique.)

Try a re-size of your browser window when visiting any page of the sites above. Dragging the corner can produce the most dramatic results.

Surprise! The images scale up and down smoothly as the window is narrowed or widened. As Big John wrote about this method, "It's robust." And it's cross-platform, too (apparently). The layouts do, of course, break at extremely small widths no visitor is likely to use, but the image scaling is seamless.

When using this technique, be aware that bitmapped graphics may not scale well, especially if scaled larger than their intrinsic size. Test this technique carefully to understand its value and pitfalls, and then decide if and where it is useful for your sites.

One suggestion which works well is to scale your images to the largest size you can imagine anyone viewing, and then let browsers scale them down, rather than up.

Note that you may experience problems in IE when using several percentages that add to 100%, probably due to rounding errors. For example, five images sized at 20% each may wrap onto a second line. If this happens, try setting a slightly smaller percentage (e.g. 19.9%) to make IE behave. You may wish to use a Css Hack to hide this declaration from other browsers.

Also, in IE6 (and maybe earlier) be careful with percentages on child elements. This is because IE apparently does not inherit the width of a parent with an undeclared width. So, if you do something like this:

div#outside { position: absolute; left: 100px; }

div#inside { width: 100%; }

The "inside" element will have a width of 100% of the browser window and not 100% of the "outside" element as you might have intended. This means that it will actually stick out past the right side of the window, give you a dreaded horizontal scrollbar, and cascade unpleasantly through any percentage-sized content in the "inside" div. Mozilla, Safari and probably other browsers may not have this "problem". Explicitly declare all widths you wish to be inherited by percentage; don't trust IE to realize it might have to calculate twice.

Personal tools