title: Image resize to fit screen
body: <p>I created this code to resize photos/images to fit the screen, considering the space available for the nav bar.</p>
  
  <p>The script fires on image load and on navigation click.</p>
  
  <p>Does anyone have suggestions as to making this better and ensuring browser compatibility?</p>
  
  <h2>HTML</h2>
  
  <pre><code>$(document).ready(function(){
   $("#photo").load(function(){
    resize();
   });
  
   $(".navigation img").click(function(){
    var imgPath = $(this).attr("src"); 
    $("#photo").attr({ src: imgPath });
    resize();
    return false;
         });
     });
  </code></pre>
  
  <h2>Javascript</h2>
  
  <pre><code>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&gt;=origSizeH){
  
       var newHeight = Math.round(screenSizeW*ratioHz);
       if (newHeight &lt;= 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
      }
    };
  </code></pre>