根據父寬度調整圖像大小jQuery

我想縮放圖像以適合其父元素寬度，特別是位於表格中的圖像。根據父寬度調整圖像大小jQuery

問題是，當涉及到確定父元素的寬度時，不同的瀏覽器和平臺似乎行爲不同。

所以我試圖讓父TD元素的寬度$(document).ready：

$('td').each(function() { 
    var width = $(this).width(); 
    $(this).width(width); 
});

然後在$(window).load（當加載圖像）我試着根據圖像的寬度設置寬度css樣式的td：

var parentWidth = $(this).parent().width(); 
if ($(this).closest('td')) { 
    parentWidth = $(this).closest('td').css('width').replace('px', ''); 
}

但是這似乎是不可靠的。它有時可用，在某些瀏覽器中有效，但有時會失敗，爲td寬度提供錯誤的值。

我希望能夠在加載圖像之前獲得td的寬度，以便寬度不會由擴展它的圖像扭曲。

當然，如果不是IE8及以下版本不支持最大寬度和最大高度，但沒有這樣做，這些都不是必需的。

我怎樣才能做到這一點，並得到圖像加載之前的父寬度？

順便說一下：td可以有一個寬度百分比值開始在100％寬度表中。

來源

2012-01-09 Anders

這行不正確：

if ($(this).closest('td'))

最接近返回0或1個元件的jQuery對象。您可能的意思是：

if ($(this).closest('td').length == 1)

來源

2012-01-09 14:14:47

你是對的，那是問題的一部分。謝謝。 – Anders 2012-01-10 16:48:46

根據caniuse.com，IE 7和IE 8實際上支持最大高度和最大寬度。只有IE 6不能（並且有很多解決方法可能適合您的目的，以及IE的條件註釋可以用來對任何給定版本的IE所需的代碼進行沙箱處理）。

您是否嘗試過簡單地在圖像中使用width: 100%;？它應該適用於所有的瀏覽器，並且不需要大量的JavaScript，只要你在加載時設置父元素的寬度（如果你在加載後改變寬度，你可能需要一個一點點的JavaScript來「刷新」圖片的大小，但它應該比現在做的要少得多）。

來源

2012-01-09 14:10:00 Shauna

嗯，寬度設置爲100％不起作用，因爲一些圖像太大，所以它們溢出。這就是爲什麼我需要最大寬度。據我所知這不起作用，至少如果你把它設置爲100％。但歡迎您在這裏回答：http://stackoverflow.com/questions/8645087/set-max-width-in-internet-explorer哪裏有這個問題的賞金。我會再試一次，但上次檢查時不起作用。 – Anders 2012-01-10 16:48:08

根據父寬度調整圖像大小jQuery

回答

相關問題