当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Resize a set of HTML element

问题描述:

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).

网友答案:

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");
网友答案:

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.

网友答案:

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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: