调整一组HTML元素的大小

Question

我有类似于以下HTML代码：

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

我希望将包含所有内容的div调整为任意大小。例如，我可以使用JavaScript获取div的宽度，然后相应地调整所有元素的大小，但最简单的方法是什么？我可以使用jQuery，我尝试过：

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

但它只收缩了 #resizeThis ，而没有它的子元素。

那么我该怎么处理背景、文本等呢？

我想这样做是为了生成缩略图（通常为原始尺寸的25%）。

- Tower

---

不要使用浏览器调整图像大小，这会导致糟糕的图片效果。在服务器端生成缩略图（例如：使用ImageMagick）。 - erenon

我做不到那样... 我需要在客户端上进行操作，并且要拉伸动态HTML，而不仅仅是图片... 我不能要求用户每5秒钟截屏并调整大小。 - Tower

@erenon：新一代浏览器在调整大小时似乎使用双三次插值算法。然而，服务器端生成缩略图的更好理由是为了更快地加载图像。几个1024x768的JPEG图像加载速度比这些尺寸的25%慢得多。 - Andy E

Answer 1

试试这个

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

< p > >操作符仅会选择直接子元素。

以上代码将选择#resizeThis的所有子元素，但你也想要选择该div。可以尝试：

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

此外，您是否考虑使用CSS类而不是多次调用 .css() 。

例如：

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

- James Wiseman

---

谢谢，那让我开始了！现在我需要使用一些聪明的逻辑来调整文本大小。 - Tower

Answer 2

我找到了一个完美的解决方案！

我只需要这样做：

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

它可以正确地调整其下的所有元素大小！:)

还有一个适用于Gecko的版本。这完全符合我的需求。

- Tower

---

这并不是一个“完整的解决方案”，因为它在Firefox和IE中无法正常工作。 - Zwik

Answer 3

你无法更改内联元素（例如p和span）的宽度。你只能为块级元素（display:block）设置宽度。当然，你可以更改内联元素的display属性，但这会引起更多麻烦。

文本元素唯一可以做的就是更改字体大小。但是，将绝对宽度设置为包含文本的元素是不可能的。文本要么需要溢出，要么会出现滚动条。

- kgiannakakis