r-image.js

/*

  To make responsive images easy.
  
  Sample use:
  
  <style>
    .responsive-image {
      width: 100%;
      height: 0px;
      padding-bottom: 100%;
    }
  </style>
  
  <div data-r-image="{{ my_image.url }}" class="responsive-image></div>

  Intended for use with a framework like django with a CDN where you don't know where your images
  are coming from until runtime. Instead of either running your static assets (like your CSS) through
  your server or inlining your style for background images, this snippet of jQuery runs through and
  takes them from a data tag and makes it the background.
  
  Background-size and background-repeat are included for convenience. You can just as easily include
  in the css like so:
  
  [data-r-image] {
    background-size: 100%, 100%;
    background-repeat: no-repeat;
  }
  
  Advantage: Clean, clean code. All the inline styles get hellacious otherwise.
  Disadvantage: No JavaScript? No images. :(
  
  Author: Brian Holt
  Twitter: @holtbt
  
  Credit: Russell Ahlstrom (@janiv2) for correcting my assumptions.

*/

(function($) {
  $('[data-r-image]').each(function() {
    var $this = $(this);
    $this.css({
      'background-image': 'url(' + $this.data('rImage') + ')',
      'background-size': '100%, 100%',
      'background-repeat': 'no-repeat'
    });
  });
})(jQuery);