调整一组 HTML 元素的大小
我有类似于
<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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
试试
这个
>
运算符将仅选择直接子级。上面的代码将选择
#resizeThis
的所有子级,但您也需要 div。尝试:另外,您是否考虑过使用 CSS 类而不是多次调用
.css()
。例如
Try this
The
>
operator will only select immediate children.The above will select all children of
#resizeThis
, but you want the div as well. Try:Also, have you thought about using a CSS class instead of multiple calls to
.css()
.E.g.
我找到了完美的解决方案!
我就是这么做的:
它会正确调整其下所有元素的大小! :)
还有一个 Gecko 版本。这非常适合我的需求。
I found a perfect solution!
I just do:
and it resizes all elements under it properly! :)
There's also a Gecko version for this. This suits my needs perfectly.
您无法更改内联元素的宽度(例如 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.