Open Source Resources for Web Application Developers

Shopify - Online Store Builder
Follow Us on Social Sites
Subscribe RSS Subscribe Newsletter Like us on Facebook Follow us on Twitter Follow us on Google+
  • Home
  • News
  • Plugins
  • Design
  • Others
  • Books
  • About
20 Apr

Resize Your Images Automatically with Fluid Images

  • Information, License Free
  • Leave a Comment

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

Share
Tweet
Sponsors
subscribe to our newsletter - weekly free resouces for web developers
follow us on social sites - rss, facebook, google+, Twitter
Subscribe RSS Like us on Facebook Follow us on Twitter Follow us on Google+
Related Resources
YoxView – A Free jQuery Image Viewer Plugin

YoxView – A Free jQuery Image Viewer Plugin

Javascript Image Cropper UI using Prototype & Scriptaculous

Javascript Image Cropper UI using Prototype & Scriptaculous

Dynamic Grid Layout Plugin for Pinterest-like Websites

Dynamic Grid Layout Plugin for Pinterest-like Websites

Bits & Pixels: Cross-Browser Transparent Columns

Bits & Pixels: Cross-Browser Transparent Columns

Dynamically-Resized Background Image with Backstretch

Dynamically-Resized Background Image with Backstretch

Fluid 960 Grid System Templates

Fluid 960 Grid System Templates

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.

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

© Copyright 2012 WebAppers | About | Archives | Privacy Policy | Advertise | Contact

Sponsors
Advertise Here
Search
By Keywords
30 Days / All Time
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • Professional Business Cards Made By Designers
  • Best Free Chrome Extensions for Web Developers
  • All of the Best Free WordPress Themes You Need
  • How to Create a Web App Admin User Interface
  • Nice List of Open Source Fish Eye Menu
  • Best Web Admin Templates
  • 25 Useful Blogs for Web Design & Development
  • Simple Javascript Progress Bar with CSS
  • 10 Useful & Quality Design Resources
  • Free Web Application Icons
  • How to Create High-Performance Code
  • Easy to Use, Drag & Drop Bootstrap Interface Builder
  • Tiny Responsive jQuery Slider without Fancy Effects
  • How to Create Realtime Multi-player Games in HTML5
  • Create an Amazon-like Navigation Menu with jQuery
  • A True Responsive jQuery Lightbox Plugin for Free
  • How to Use Web Workers for Image Manipulation
  • Pretty Neat jQuery Mobile Theme Based on Flat UI
  • Super Smooth CSS Transitions for jQuery
  • How to Make FullScreen Page Transitions with CSS
Sponsors
Plugins
  • Advertisement15
  • Calendar47
  • Capture19
  • Charts55
  • Chat22
  • Demo Tour16
  • Gallery121
  • Maps30
  • Menu87
  • Polls9
  • Popup49
  • Tooltips42
  • Upload33
  • Video18
Desgin
  • Brushes11
  • Buttons25
  • Color Schemes24
  • Fonts47
  • Forms112
  • Icons108
  • Patterns24
  • PS Tutorials15
  • Stock Photos21
  • Tables25
Others
  • Announcement103
  • Best Collections6
  • Code55
  • eCommerce24
  • Framework215
  • Hosting13
  • Information239
  • Inspiration32
  • Legal Documents10
  • Reviews8
  • Security13
  • Social28
  • Sound16
  • Stats39
  • Tools293
  • Webmail14
Licesnes
  • BSD License67
  • CC License122
  • GPL License224
  • LGPL License40
  • License Free739
  • MIT License410
Sponsors
Advertise Here
Partners
NetDNA