调整一组 HTML 元素的大小

发布于 2024-08-18 03:59:21 字数 462 浏览 2 评论 0原文

我有类似于

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

我想将 div 及其所有内容调整为任意大小的 HTML 代码。例如,我可以使用 JavaScript 获取 div 宽度,然后相应地调整所有元素的大小,但最简单的方法是什么?我可以使用 jQuery,我尝试过:

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

但它只缩小了 #resizeThis 而不是它的子项。

我可以对背景、文本等做什么?

我想这样做,以便我可以生成缩略图(通常是原始大小的 25%)。

I have HTML code similar to

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

I want to resize the div with all its contents to arbitrary size. For example, I could use JavaScript to get the div width and then resize all elements accordingly, but what's the simplest way to do this? I can use jQuery, I tried:

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

but it only shrinked the #resizeThis and not its children.

And what can I do about backgrounds, text, etc?

I want to do this so that I could generate thumbnails (usually 25% of the original size).

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

本宫微胖 2024-08-25 03:59:21

试试

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

Try this

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

The > operator will only select immediate children.

The above will select all children of #resizeThis, but you want the div as well. Try:

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

Also, have you thought about using a CSS class instead of multiple calls to .css().

E.g.

$("#resizeThis *").find("*").andSelf().addClass("MyCssClass");
满天都是小星星 2024-08-25 03:59:21

我找到了完美的解决方案!

我就是这么做的:

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

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

还有一个 Gecko 版本。这非常适合我的需求。

I found a perfect solution!

I just do:

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

and it resizes all elements under it properly! :)

There's also a Gecko version for this. This suits my needs perfectly.

雄赳赳气昂昂 2024-08-25 03:59:21

您无法更改内联元素的宽度(例如 p 和 span)。您只能设置块元素的宽度(display: block)。当然你可以改变内联元素的显示属性,但这会带来更多麻烦。

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

You can't change the width of inline elements (p and span for example). You can only set the width for block elements (display: block). Of course you can change the display property for inline elements, but that will cause more trouble.

The only thing you can do with text elements is to change the font size. However, it is impossible to set absolute width to elements containing text. The text will either need to oveflow or a scroll bar will appear.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文