jquery扩展和调整大小的问题

Question

我正在使用这个jquery来尝试控制div打开的宽度和高度，这取决于屏幕分辨率，这是我正在使用的代码，但除了裁剪我的图像之外它似乎没有任何影响。 我说它似乎没有工作，因为它留下了一个很大的空间，当我看到萤火虫它告诉我，当我在较低的分辨率观看时，盒子已经扩展到600px x 488px。

我不确定图像是否正在将div推出那个大小，因为图片正好是600px x 488px但是我需要它们是相同的文件，对于将来动态PHP库更新来说更小，我该如何修复此代码以及如何我可以根据分辨率轻松调整图像大小吗？

$(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

你可以在这里查看即使你调整屏幕大小，计算出的宽度实际上是=你全新的;）屏幕尺寸！ 要在浏览器中获得实际的“屏幕”（窗口！）大小，您可以使用

$(window).width(); 和$(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);   
    }
});

---

在这里你可以看到它在行动，只需调整框架的大小。

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

Answer 2

嗯，无法弄清楚你的问题...似乎对我有用 ，请参阅http://jsfiddle.net/EtEzN/2/

当然，您的代码段仅调整DIV图层的大小，因此您还必须调整包含图像的大小！

编辑：小提琴更新，所以脚本认为浏览器文档高度而不是屏幕高度（请记住：屏幕分辨率<>浏览器分辨率<>文档分辨率）

Answer 3

这些图像确实在推动你的div 。 如果你想改变图像大小，那么你不能只调整包含div的大小，你必须改变img本身的大小。

我假设图像的大小与包含它的div大小相同。 因此，您的代码应该只需要稍作修改：

$(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);
}
});

此外， screen属性表示客户端显示屏幕的分辨率，而不是浏览器窗口的实际大小。 既然你正在使用jQuery，你可以使用$(window).width()和$(window).height() ，或者如果你曾经使用过普通的JS，那么window.innerWidth和window.innerHeight属性（适用于Firefox） ），或IE的document.body.clientWidth ，虽然浏览器兼容性很烦人，所以我可能会坚持使用jQuery或其他库。