This is an img tag loader that resizes the image to fix into a square area, using CSS to provide padding on the sides to keep the original aspect ratio. This solves the problem of using an tag with a square width/height
Use like
squareImg("http://url/to/image", 128, "#000000", function(i) { /* image loaded into DOM node i, ready to insert into my own DOM */ });
| function(){ | |
| // make sure | |
| // to annotate | |
| // your code | |
| // so everyone | |
| // can learn | |
| // from it! | |
| // see jed's entries | |
| // for examples. | |
| } |
| function(){/* Your entry, a useful, unique, and valid JavaScript expression that packs as much functionality into 140 bytes as possible. */} |
| DO WHAT THE F*** YOU WANT TO PUBLIC LICENSE | |
| Version 2, December 2004 | |
| Copyright (C) 2011 Ben Combee <combee@techwood.org> | |
| Everyone is permitted to copy and distribute verbatim or modified | |
| copies of this license document, and changing it is allowed as long | |
| as the name is changed. | |
| DO WHAT THE F*** YOU WANT TO PUBLIC LICENSE | |
| TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION | |
| 0. You just DO WHAT THE F*** YOU WANT TO. |
| { | |
| "name": "squareImg", | |
| "description": "This should be a short description of your entry.", | |
| "keywords": [ | |
| "image", | |
| "loader", | |
| "dom" | |
| ] | |
| } |
| <!DOCTYPE html> | |
| <title>Foo</title> | |
| <div>Expected value: <b>undefined</b></div> | |
| <div>Actual value: <b id="ret"></b></div> | |
| <script> | |
| // write a small example that shows off the API for your example | |
| // and tests it in one fell swoop. | |
| var myFunction = function(){ /* the code here should be identical to the entry. */ } | |
| document.getElementById( "ret" ).innerHTML = myFunction() | |
| </script> |