调整一组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

回答