調整一組HTML元素

<div id="resizeThis"> 
<div style="background: url(...)">...text...images...</div> 
... 
</div>

HTML代碼，我要調整大小與它的所有內容，任意大小的DIV。例如，我可以使用JavaScript獲取div寬度，然後相應地調整所有元素的大小，但最簡單的方法是什麼？我可以使用jQuery，我想：

$("#resizeThis > *").css('width', '64px').css('height', '64px');

但只收縮了#resizeThis，而不是它的孩子。

我能做些什麼關於背景，文字等？

我想這樣做，以便我可以生成縮略圖（通常爲原始大小的25％）。

2010-01-20 Tower

請勿使用您的瀏覽器調整圖像大小。它使壞的照片。在服務器端生成縮略圖。（例如：與imagemagick） – erenon 2010-01-20 13:37:48

我不能這樣做......我需要在客戶端做到這一點，並拉伸動態HTML，而不僅僅是圖像......我不能要求用戶截圖並調整大小每5秒鐘一次。 – Tower 2010-01-20 13:45:54

@erenon：在調整大小時，較新的瀏覽器似乎使用雙三次重採樣。然而，生成縮略圖服務器端的更好的參數是更快加載圖像。 1024x768的幾個jpeg會比這個尺寸的25％的加載速度慢得多。 – 2010-01-20 13:47:02

我找到了一個完美的解決方案！

我只是做：

$('#resizeThis').css('-webkit-transform', 'scale(0.5)');

，並適當調整大小，其下的所有元素！ :)

這裏還有一個壁虎版本。這完全適合我的需求。

2010-01-20 14:58:12 Tower

這不是一個「完整的解決方案」，因爲它不適用於Firefox和IE – Zwik 2012-03-26 00:43:39

您不能更改內聯元素的寬度（例如p和span）。您只能設置塊元素的寬度（顯示：塊）。當然，您可以更改內聯元素的顯示屬性，但這會造成更多麻煩。

您可以對文本元素進行的唯一操作是更改字體大小。但是，不可能將絕對寬度設置爲包含文本的元素。文本將需要過度流動或滾動條會出現。

2010-01-20 13:42:58 kgiannakakis

試試這個

$("#resizeThis *").css('width', '64px').css('height', '64px');

的>運營商將只能選擇直接孩子。

以上將選擇#resizeThis的所有子項，但您也需要div。嘗試：

$("#resizeThis").find("*").andSelf().css('width', '64px').css('height', '64px');

而且，你有沒有想過使用CSS類，而不是多個調用來.css()。

例如

$("#resizeThis *").find("*").andSelf().addClass("MyCssClass");

2010-01-20 13:43:48

謝謝，這讓我開始了！現在我需要用一些聰明的邏輯來調整文本的大小。 – Tower 2010-01-20 13:49:04

回答