Demos | WP Smart Crop

Resize the window, to see WP SmartCrop in action. If you’d like to see how these demos were styled,

download the stylesheet

To prove that you don’t need any special theme prep, why not render this page in any of the 15 most popular themes on wordpress.org?

Demo 1

this demo shows one of the most simple uses of WP Smart Crop: making an image 100% wide, with a fixed height.

Demo 2

this demo places three varying images side by side at 33% of the page width each. The images match in height, despite having totally different native proportions.

103 Caravaggio, Saint John the Baptist in the Wilderness

Mona_Lisa,_by_Leonardo_da_Vinci,_from_C2RMF_retouched

Demo 3

This demo shows some more advanced tricks, where image height is matched to content height, and the layout reflows at smaller sizes, using media queries.

At desktop screen sizes, this demo is presented as an image at the left of a block of text, matching its height. However, at screen widths below 520px wide, it displays as a stack, with the text appearing below a short image. Note that the actual image resource stays the same for both of these views.