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 clic
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();