jquery - 调整一组 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%)。

Answer 1

试试这个

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

> 操作符只会选择直接的 child 。

以上将选择 #resizeThis 的所有子项，但您还需要 div。尝试:

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

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

例如

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