Image Stretching with CSS

24 January

Image Stretching with CSS

One of the most vital considerations when designing any website is how it will display in different browsers, at different resolutions and on different screens. While one person views your site with Firefox, another is using Internet Explorer and both are displaying specific elements in their own special way. To counteract this, it is a matter of finding a loophole to work around the browsers’ shortcomings, or opting for a solution that agrees with both, but compromises the final product.

It tends to be a time-consuming process and lose-lose for everyone involved. That is why it is helpful to have a clever community that consistently churns out new fixes to old problems. It is something I had recently had some trouble with, stretching images with CSS, but was eventually overcame. Alex Walker offers his one-stop reference guide for avoiding this nuance.

The first three solutions (Embedding everything into an SWF with Flash, HTML5, and Seam Carving) are brief overviews of methods that have worked in the past or have some glimmer of an effective future, but at present lack the clout. They are all precursor to his more efficient method that basically boils down to playing with CSS attributes.

The technique involves layering multiple transparent images, and instead of focusing the stretching on prominent foreground elements, focusing it on the menial and the background; almost creating an illusion of sorts without the once-problematic image tearing.

Walker provides a more in-depth discussion of the process, code snippets, and working examples of Image Stretching at http://www.sitepoint.com.

TAGS: Web Development, Web Design

Share this post!