|
ImagesModule
Notes on the Images Module
Images ModuleLocation/stylesheets/modules/images.css Source Codehttp://code.google.com/p/sparkl/source/browse/trunk/stylesheets/modules/images.css SummaryThis module provides some class names that will help to style images for common usage. Images are notoriously a pain when it comes to flexible layouts, but this module ensures that the images will scale to fit the container they are in. HTML Design PatternThis module affects all images that use particular classes, such as in the examples below: <img alt="an abstract work of art" src="images/abstract.png" class="half right" /> <img alt="an abstract work of art" src="images/abstract.png" class="full left" /> <img alt="an abstract work of art" src="images/abstract.png" class="full" /> DescriptionImages need to be inserted into the html document without the width and height explicitly stated. There are then a number of class names that can be added (see the example above):
Why It's BulletproofThe images will scale as the container they are in changes. How It WorksThe 'full' and 'half' classes use the max-width CSS property to set a width of 90% and 46% respectively (not 100% and 50% to allow for margins and padding). This ensures that the width of the image will never exceed the size of the container (or half the container in the case of 'half'). The browser takes care of scaling the image and keeps the height in the same ratio. Because max-width is used, the image will never actually go above its actual width, so pixelation will be avoided. IE FixesInternet Explorer 6 and below doesn't support the max-width property, so is just given a width value instead. This means that the images might scale higher than their original size, causing pixelation. One way to minimise this effect is to ensure that images are sufficiently large to begin with. IssuesThe scaled down images lose quality (this seems to depend on the browser). Further ReadingOther Modules
|
Sign in to add a comment
