Posted By

johnloy on 05/15/09


Tagged

css javascript hack textmate images Trick


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

Kraeved


Fluid high-quality image scaling with CSS and JS


 / Published in: Other
 

  1. /*
  2.  
  3. http://unstoppablerobotninja.com/entry/fluid-images/
  4.  
  5. var imgSizer = {
  6. Config : {
  7. imgCache : []
  8. ,spacer : "/path/to/your/spacer.gif"
  9. }
  10.  
  11. ,collate : function(aScope) {
  12. var isOldIE = (document.all && !window.opera && !window.XDomainRequest) ? 1 : 0;
  13. if (isOldIE && document.getElementsByTagName) {
  14. var c = imgSizer;
  15. var imgCache = c.Config.imgCache;
  16.  
  17. var images = (aScope && aScope.length) ? aScope : document.getElementsByTagName("img");
  18. for (var i = 0; i < images.length; i++) {
  19. images[i].origWidth = images[i].offsetWidth;
  20. images[i].origHeight = images[i].offsetHeight;
  21.  
  22. imgCache.push(images[i]);
  23. c.ieAlpha(images[i]);
  24. images[i].style.width = "100%";
  25. }
  26.  
  27. if (imgCache.length) {
  28. c.resize(function() {
  29. for (var i = 0; i < imgCache.length; i++) {
  30. var ratio = (imgCache[i].offsetWidth / imgCache[i].origWidth);
  31. imgCache[i].style.height = (imgCache[i].origHeight * ratio) + "px";
  32. }
  33. });
  34. }
  35. }
  36. }
  37.  
  38. ,ieAlpha : function(img) {
  39. var c = imgSizer;
  40. if (img.oldSrc) {
  41. img.src = img.oldSrc;
  42. }
  43. var src = img.src;
  44. img.style.width = img.offsetWidth + "px";
  45. img.style.height = img.offsetHeight + "px";
  46. img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
  47. img.oldSrc = src;
  48. img.src = c.Config.spacer;
  49. }
  50.  
  51. // Ghettomodified version of Simon Willison's addLoadEvent() -- http://simonwillison.net/2004/May/26/addLoadEvent/
  52. ,resize : function(func) {
  53. var oldonresize = window.onresize;
  54. if (typeof window.onresize != 'function') {
  55. window.onresize = func;
  56. } else {
  57. window.onresize = function() {
  58. if (oldonresize) {
  59. oldonresize();
  60. }
  61. func();
  62. }
  63. }
  64. }
  65. }
  66.  
  67. */
  68.  
  69. img,
  70. object {
  71. max-width: 100%; /* Automatically scales height proportionally in FF, IE8, Safari >2 */
  72. }
  73.  
  74. img { -ms-interpolation-mode: bicubic; } /* IE8 scaling of JPEG */
  75.  

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: wrathyimp on March 13, 2011

Will it work for all teh images on the page or can we define any in specific.

You need to login to post a comment.