jquery扩展和调整大小的问题

Question

Im using this jquery to try and control how wide and high a div opens depending on the screen resolution this is the code im using but it doesn't seem to be having any effect apart from cropping my image. I say it doesnt seem to work becuase it leaves a big space and when I look at firebug it tells me the box has expanded to the 600px x 488px when im viewing in the lower resolution.

Im not sure if the images are pushing the div out the that size because the pictures are exactly 600px x 488px but I need them to be the same file just smaller for dynamic PHP gallery updating in the future, how can I fix this code and how can I easily resize the images depending on the resolution?

$(document).ready(function(){
if ((screen.width>=1440) && (screen.height>=764)) {


$("#slideshow_box")
    .animate({"height": "600px"}, 500)
    .animate({"width": "488px"}, 500);

}
else  {

$("#slideshow_box")
    .animate({"height": "400px"}, 500)
    .animate({"width": "288px"}, 500);


}
});

Answer 1

DEMO

As you can se HERE even if you resize your screen the calculated width is actually = your brand new ;) screen - size! To get the actual 'screen' (window!) size in your browser you can use

$(window).width(); and $(window).height();

$(document).ready(function(){
    var winW = $(window).width();
    var winH = $(window).height();
    alert("Window width is: "+winW+"px, window height is: "+winH+'px');
    if ((winW>=1440) && (winH>=764)) {
        $("#slideshow_box")
            .animate({"height": "600px"}, 500)
            .animate({"width": "488px"}, 500);
    } else {
        $("#slideshow_box")
            .animate({"height": "400px"}, 500)
            .animate({"width": "288px"}, 500);   
    }
});

---

HERE you can see it in action, just resize the frame.

$(window).resize(function() {
    $('#size').html(
        ' Window width: '+$(window).width()+
        '<br> Window height: '+$(window).height()
    );
});

Answer 2

Hum, can't figure out your problem...seems to work for me, see http://jsfiddle.net/EtEzN/2/

For sure, your snippet resizes DIV layer only, so you have to resize containing images too!

EDIT: Fiddle is updated, so script regards browsers document height instead of screen height (remember: screen resolution <> browser resolution <> document resolution)

Answer 3

The images are indeed pushing out your div . If you want to change image size, then you can't just adjust the size of the containing div , you have to change the size of the img itself.

I'm assuming that the image is intended to be the same size as the div that contains it. Thus, your code should only require a slight modification:

$(document).ready(function(){
if ((screen.width>=1440) && (screen.height>=764)) {

// Since the image is already the same size as the div,
// don't change the image
$("#slideshow_box")
    .animate({"height": "600px"}, 500)
    .animate({"width": "488px"}, 500);
}
else  {

// Resize the image along with the div
$("#slideshow_box, #slideshow_box img")
    .animate({"height": "400px"}, 500)
    .animate({"width": "288px"}, 500);
}
});

Also, the screen properties signify the resolution of the client's display screen, not the actual size of the browser window. Since you're using jQuery, you can use $(window).width() and $(window).height() , or if you're ever using plain JS, the window.innerWidth and window.innerHeight properties (for Firefox), or document.body.clientWidth for IE, although browser compatibility is annoying for this, so I'd probably stick with jQuery or another library.