Advanced Search

Fluid high-quality image scaling with CSS and JS

/ Published in: Other
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. }
  67. */
  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

You need to login to post a comment.