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