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?
$(document).ready(function(){
$("#photo").load(function(){
resize();
});
$(".navigation img").click(function(){
var imgPath = $(this).attr("src");
$("#photo").attr({ src: imgPath });
resize();
return false;
});
});
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
}
};
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels. For example, the original image is 640×960.
When you work with background images, you may want an image to stretch to fit the page despite the wide range of devices and screen sizes. The best way to stretch an image to fit the background of an element is to use the CSS3 property, for background-size, and set it equal to cover.
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/)
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With