WebAppers

/ best free open source web resources /

Shopify

Resize Your Images Automatically with Fluid Images

Posted · Category: Information, License Free

Ethan Marcotte has raised an issue about Fluid Grids, that working with non-fixed layouts can be more difficult once you introduce fixed-width elements into them. By default, an image element that’s sized at, say, 500px doesn’t exactly play nicely with an container that can be as large as 800px, but as small as 100px. What’s a designer to do?

He has wriiten a little script that makes Fluid Images. In short, it cycles through your document, swaps out the images for a transparent GIF, and applies the AlphaImageLoader property to each one. Then, whenever the window’s resized, the script automatically recalculates the proper, proportional height and width of the image, and resizes the spacer graphic accordingly. You can see it in action, and download the script.

Fluid Images

Requirements: -
Demo: http://unstoppablerobotninja.com/entry/fluid-images/
License: License Free

4 Comments
  • http://www.pixelstudioworks.com/ Kamal

    Nice technique…it’s a cool.
    Thanks

  • http://blog.shift.it andrea

    Beautiful!!! I’m searching for a script like that one that let me set an image as a page background and let me modify the size of the image as the main window get resized. Do you think that is possible to do that with a script?

  • http://unstoppablerobotninja.com/ Ethan

    Thanks for the link, Ray! Just a quick note to clarify: the script’s only needed to get fluid images resizing smoothly in Internet Explorer (earlier than version 8). Otherwise, you can just use a simple CSS fix.

  • http://www.purgehosting.com/ Chris

    I really like this concept.

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons