jQuery resizeAndCrop Examples

Original images resized to 96px height

Standard square resize with no plugin

With plugin: placeholder + 96x96 resize/crop + center

Placeholder shows first then resized+cropped image replaces it.
Note: 4th image is invalid (returns error message) and shows the placeholder

With plugin: no placeholder + 96x96 resize/crop + center

When no realsrc attribute is present, images are first displayed with standard HTML resize, then are resized and cropped.

With plugin: placeholder + 96x96 resize/crop + no center

For more realistic simulation, click on left link below

Reload with simulated image load delay | Reload with cached images (no delay)

With plugin: placeholder + 220x220 resize/crop + center

Images smaller than placeholder don't get resized.

Non-square resize & crop

4x3 ratio (horizontal)

4x3 ratio (vertical)

Preserving placeholder's original size

Images smaller than placeholder don't get resized but the space of the placeholder is preserved when preserveSize parameter is set to true.

Force image to be resized even if smaller than placeholder

Images smaller than placeholder get resized if you set forceResize to true.

Using plugin as a simple image loader

No crop happens (set crop to false). A placeholder is displayed while the real images load in the background.
Note: 3rd image is invalid (returns error message)

It also works with hidden images

Show group of hidden images