Fluid high-quality image scaling with CSS and JS


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



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. }
  66. */
  67. img,
  68. object {
  69. max-width: 100%; /* Automatically scales height proportionally in FF, IE8, Safari >2 */
  70. }
  71.  
  72. img { -ms-interpolation-mode: bicubic; } /* IE8 scaling of JPEG */
  73.  

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.