调整一组 HTML 元素的大小答案

【问题标题】：Resize a set of HTML element调整一组 HTML 元素的大小
【发布时间】：2015-02-02 00:27:05
【问题描述】：

我有类似于

的 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%）。

【问题讨论】：

不要使用浏览器调整图像大小。它会拍出糟糕的照片。在服务器端生成缩略图。（例如：使用 imagemagick）
我不能这样做...我需要在客户端执行此操作，并拉伸动态 HTML，而不仅仅是图像...我不能要求用户截取屏幕截图并调整大小每 5 秒一次。
@erenon：较新的浏览器在调整大小时似乎使用双三次重采样。但是，生成缩略图服务器端的一个更好的论点是更快地加载图像。几个 1024x768 的 jpeg 加载速度要比 25% 的 jpeg 慢得多。

【解决方案1】：

试试这个

$("#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");

【讨论】：

【解决方案2】：

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

我只是这样做：

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

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

还有一个 Gecko 版本。这完全符合我的需要。

【讨论】：

【解决方案3】：

您不能更改内联元素的宽度（例如 p 和 span）。您只能设置块元素的宽度（显示：块）。当然你可以改变内联元素的显示属性，但是这样会比较麻烦。

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

【讨论】：