Skip to content

Instantly share code, notes, and snippets.

@diodoe

diodoe/resize_image_by_window.js

Created October 15, 2010 14:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save diodoe/628283 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save diodoe/628283 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. diodoe renamed this gist Oct 15, 2010. 1 changed file with 0 additions and 0 deletions.
    0 resize_image_by_window → resize_image_by_window.js
    View file
    File renamed without changes.
  2. diodoe revised this gist Oct 15, 2010. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion resize_image_by_window
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    //Adjust image size
    //needs jquery
    $.fn.resizenow = function() {
    //put a #grid and #resizeme on your html and call $('#resizeme').resizeimg()
    $.fn.resizeimg = function() {
    //Define starting width and height values for the original image
    var startwidth = 1280;
    var startheight = 960;
  3. diodoe created this gist Oct 15, 2010.
    31 changes: 31 additions & 0 deletions resize_image_by_window
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    //Adjust image size
    //needs jquery
    $.fn.resizenow = function() {
    //Define starting width and height values for the original image
    var startwidth = 1280;
    var startheight = 960;
    //Define image ratio
    var ratio = startheight/startwidth;
    //Gather browser dimensions
    var browserwidth = $(window).width();
    var browserheight = $(window).height();
    //Resize image to proper ratio
    if ((browserheight/browserwidth) > ratio) {
    $(this).height(browserheight);
    $(this).width(browserheight / ratio);
    $('#grid').height(browserheight);
    $('#grid').width(browserheight / ratio);
    $(this).children().height(browserheight);
    $(this).children().width(browserheight / ratio);
    } else {
    $(this).width(browserwidth);
    $(this).height(browserwidth * ratio);
    $('#grid').width(browserwidth);
    $('#grid').height(browserwidth * ratio);
    $(this).children().width(browserwidth);
    $(this).children().height(browserwidth * ratio);
    }
    //Make sure the image stays center in the window
    $(this).children().css('left', (browserwidth - $(this).width())/2);
    $(this).children().css('top', (browserheight - $(this).height())/2);
    };