jquery：設置圖像寬度但不大於原始大小？

嘿傢伙，我不知道如何解決這個問題：jquery：設置圖像寬度但不大於原始大小？

function setimgwidth() { 
    var bw = $('.post-body').width(); 
    $(".post-body p img").each(function() { 
     var os = $(this).width(); 
     //if (bw < os) { 
      $(this).removeAttr('height'); 
      $(this).width(bw); 
     //} 
    }); 
}

基本上是我的。員額體DIV動態asdjusted的屏幕尺寸。它內部的每個圖像都應該調整到.post-body div的寬度，但只有當.post-body不大於圖像的原始大小時。我不希望圖像變得模糊。

至於現在它實際上幾乎就像我想要的那樣工作。該函數在調整窗口大小時調用。但是，如果.post-body大於實際圖像大小，圖像仍會放大。

如果我取消註釋上面的代碼似乎工作，但只有當我調整窗口的大小較小。如果調整大一些，圖像將不再調整並保持較小。這可能是因爲每次我調用函數時都會覆蓋原始大小。

不知何故，我找不到合適的解決方案，我需要你的幫助。提前致謝亞光

來源

2010-11-10 matt

你的兩條註釋掉的行不行嗎？什麼發生在他們沒有註釋的時候，而不是他們評論的時候？（他們看起來很對我） – 2010-11-10 12:48:53

好吧，它確實是一種工作，但只有當我刷新窗口。如果我調整大小並將其縮小，則圖像的大小會適當調整，但只要將它拖大，圖像不會再放大！ – matt 2010-11-10 12:56:07

您是否可以確認您的活動是在每個窗口調整大小而不是僅在窗口加載時觸發？我們可以在某處看到你的代碼嗎？ – 2010-11-10 13:11:10

當試圖調整窗口的大小以使窗口變大（因此div和圖像）時，您遇到的問題是原始圖像大小正在丟失。

下面的代碼所需要的DOM加載後運行，並且圖像具有寬度（可能需要後發生）

$(".post-body p img").each(function() { 
    // Save the original image width 
    $(this).data('width', $(this).width()); 
});

如下因素代碼需要當前窗口中運行調整事件（像你）：

function setimgwidth() { 
    var bw = $('.post-body').width(); 
    $(".post-body p img").each(function() { 
     // Check the width of the original image size 
     if (bw < $(this).data('width')) { 
      $(this).removeAttr('height'); 
      $(this).width(bw); 
     } 
    }); 
}

來源

2010-11-10 12:47:43

可能無法正常工作，因爲最接近的元素是固定爲650px的段落。 – matt 2010-11-10 13:08:47

它正在尋找與'.post-body'匹配的最接近的元素，而不是最接近的元素（除非該元素有一個「post-body」類）。 – 2010-11-10 13:10:22

不起作用，也會發生同樣的情況。只是讓這個窗口變小從而使它變大並不會做任何事情。 – matt 2010-11-10 13:25:37

您需要確保在加載後測量圖像的寬度。所以如果你只是在正常的jQuery代碼中嘗試$('#my-img').width()，它可能會返回0（除非你有寬度屬性或寬度樣式集），因爲ready事件不會等待圖像加載。 $('#my-img').load(function() { /* do something */ });應該這樣做。

來源

2010-11-10 12:54:18

jquery：設置圖像寬度但不大於原始大小？

回答

相關問題