Theme Fit

Theme Fit allows you to dynamically resize specific HTML elements with the aid of jQuery on the client side, aspect ratios maintained.

The elements to be resized (targets) as well as the elements which serve as size-reference (parents) are specified via jQuery Selectors. This allows you to shrink or grow practically any kind of HTML element (images, embeds, forms, etc.) to the size of another one, as long as the target is nested within the size-reference (parent) and the size-reference is a block-element.

Note that the resizing is happening with JavaScript on the client. It does not resize images in terms of data volume. Theme Fit's only purpose is to make HTML elements behave more flexible and to make the presentation-thing look better.

Example

You have images on your page which are to big for the wrapping HTML-container, thus screwing with your theme layout. Solution: add Theme Fit rule that has img as target and div as parent. All images will now be resized to fit the width of the most inner div-element they are nested in. (Yes, this can also be managed by putting a css max-width: 100% style rule on img tags but this is does not work in all browsers and is only for images which do not have any size specifications as attribute)

Limitations

Right now, targets can only be resized to fit the specified parent's width (aspect ratio maintained). This might be changed if more than one person demands it 8)