Resize a set of HTML element.

Question

Hi,

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

Answer 1

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.

Answer 2

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");

Answer 3

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.