Image resize to fit screen

Question

I created this code to resize photos/images to fit the screen, considering the space available for the nav bar.

The script fires on image load and on navigation click.

Does anyone have suggestions as to making this better and ensuring browser compatibility?

HTML

$(document).ready(function(){
 $("#photo").load(function(){
  resize();
 });

 $(".navigation img").click(function(){
  var imgPath = $(this).attr("src"); 
  $("#photo").attr({ src: imgPath });
  resize();
  return false;
       });
   });

Javascript

resize = function() {

    var borderVt=150; //value based on css style. bottom bar + padding of photoContain
    var borderHz=40; //value based on css style photoContain padding

    $("#photo").css("width", "auto").css("height", "auto"); // Remove existing CSS
    $("#photo").removeAttr("width").removeAttr("height"); // Remove HTML attributes   

    var origSizeW = $("#photo").width();
    var origSizeH = $("#photo").height();
    var ratioVt=(origSizeW/origSizeH);
    var ratioHz=(origSizeH/origSizeW);
    var winW = $(window).width();
    var winH = $(window).height();
    var screenSizeW=Math.round(winW-borderHz);
    var screenSizeH=Math.round(winH-borderVt);

    if (origSizeW>=origSizeH){

     var newHeight = Math.round(screenSizeW*ratioHz);
     if (newHeight <= screenSizeH){
      $("#photo").css("width", screenSizeW); // Set new width
      $("#photo").css("height", newHeight);
      }
     else{
      $("#photo").css("height", screenSizeH);
      }

    }
    else{
    $("#photo").css("height", screenSizeH); // Set new height
    }
  };

Answer 1

I know this question is well old, but here's a solution (although I'm sure the OP's works fine too):

This jQuery plugin seems to do exactly what you need: http://code.google.com/p/jquery-imagefit-plugin/

if you perform it on a 100% height, 100% width element: http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://jquery-imagefit-plugin.googlecode.com/svn/trunk/jquery.imagefit-0.2.js"></script>
<div style="width: 100%; height: 100%">
    <img  id="h5" src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"/>
</div>
<script>
    jQuery('#h5').bind('load', function() {
        jQuery('div').imagefit();
    });
</script>

(demo: http://jsfiddle.net/nottrobin/9Pbdz/ )

Answer 2

Try using the jQuery-Backgrounder plugin . You might be able to tweak it to do what you need. Here is an example:

<script src="jquery.backgrounder.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
  $(function() {
    $('#my_background').backgrounder({element : 'body'});
  });
</script>

[...]

<div id="my_background"><img src="birthday.jpg" alt="Birthday party" /></div>

Answer 3

I wrote a plugin!

jQuery.fn.positionMe = function () {
    var oH = $(window).height();
    var oW = $(window).width();
    var iH = this.outerHeight();
    var iW = this.outerWidth();

    // When the image is too small so, do nothing
    if(iW>oW && iH>oH){

        // Otherwise, proportionate the image relative 
        // to its container
        if(oH/iH > oW/iW){
            this.css("width", oW);
            this.css("height", iH*(oW/iW))
        } else {
            this.css("height", oH);
            this.css("width", iW*(oH/iH));
        }

    }
    return this;
}

Usage:

$("#photo").positionMe();

Answer 4

Here is how I do it:

 jQuery(document).ready(function($) {
      $('.wp-post-image').height($(window).height());
 });

Answer 5

Looks good to me, but I would suggest attaching your resize function to jQuery's Window Resize Event handler. Then the image will stretch and shrink with the page.

Answer 6

var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||document.body.offsetWidth||window.screen.availWidth;
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||document.body.offsetHeight||window.screen.availHeight;

function resize() {

    a=document.getElementsByClassName(' scale');
    for(var i=0; i<a.length; i++){

        var aW = a[i].offsetWidth;
        var aH = a[i].offsetHeight;
        var d=w/h;
        var mT, mL;

        if (d>=1.5){
            aW=w;
            aH=w-(w*(34/100));
            mT=(aH/2)*-1;   
            mL=(aW/2)*-1;   
        } else {
            aH=h;
            aW=h+(h*(66/100));
            mT=(aH/2)*-1;
            mL=(aW/2)*-1;
        }

        a[i].style.height=aH+'px';
        a[i].style.width=aW+'px';
        a[i].style.marginTop=mT+'px';
        a[i].style.marginLeft=mL+'px';  
    }
}