Skip to content

Instantly share code, notes, and snippets.

@jamesmfriedman

jamesmfriedman/responsive-image.css

Last active December 22, 2015 02:59
Show Gist options
  • Save jamesmfriedman/6407114 to your computer and use it in GitHub Desktop.
Save jamesmfriedman/6407114 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jamesmfriedman revised this gist Sep 1, 2013. 2 changed files with 11 additions and 11 deletions.
    8 changes: 4 additions & 4 deletions responsive-image.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    img.responsive-image {
    padding: 50%; /*controls the ratio of the image. 37.5% 50% would be a 4 x 3 image*/
    width: 0;
    height:0;
    background-size: cover;
    background-position: center center;
    width: 0;
    height:0;
    background-size: cover;
    background-position: center center;
    }
    14 changes: 7 additions & 7 deletions responsive-image.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,12 +5,12 @@
    $(function() {

    var __init__ = function() {
    $('.responsive-image:not(.responsive-image-fixed)').each(function(){
    var img = $(this);
    img.addClass('responsive-image-fixed');
    img.attr('style', 'background-image: url('+ img.attr('src') +');');
    });
    }
    $('.responsive-image:not(.responsive-image-fixed)').each(function(){
    var img = $(this);
    img.addClass('responsive-image-fixed');
    img.attr('style', 'background-image: url('+ img.attr('src') +');');
    });
    }

    __init__();
    __init__();
    });
  2. jamesmfriedman created this gist Sep 1, 2013.
    7 changes: 7 additions & 0 deletions responsive-image.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    img.responsive-image {
    padding: 50%; /*controls the ratio of the image. 37.5% 50% would be a 4 x 3 image*/
    width: 0;
    height:0;
    background-size: cover;
    background-position: center center;
    }
    16 changes: 16 additions & 0 deletions responsive-image.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    /**
    * Quick little utiltiy that makes an image responsive by changing it to a background photo
    * Just add class of 'responsive-image'
    */
    $(function() {

    var __init__ = function() {
    $('.responsive-image:not(.responsive-image-fixed)').each(function(){
    var img = $(this);
    img.addClass('responsive-image-fixed');
    img.attr('style', 'background-image: url('+ img.attr('src') +');');
    });
    }

    __init__();
    });