I have HTML code similar to
<div style="background: url(...)">...text...images...</div>
$("#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).
$("#resizeThis *").css('width', '64px').css('height', '64px');
> 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
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.
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.