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

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

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

HERE 您可以看到它的实际效果，只需调整框架大小。

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

Answer 2

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

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

编辑：小提琴已更新，因此脚本会考虑浏览器文档高度而不是屏幕高度（请记住：屏幕分辨率＆lt;＆gt;浏览器分辨率＆lt;＆gt;文档分辨率）

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或其他库。

jquery扩展和调整大小的问题

3 个答案:

DEMO