3 Ways to Resize/Scale Web Images

If you can't see all the images on your screen, click the "Hide Text" button to bring them closer together, then gradually reduce the browser window to compare how they resize and scale at smaller screen sizes.

Fluid Ratio Resize

Image smoothly scales on a predictable path.

Usage: When artistic control is required and start/end sizes are both known,
for example, when a web developer is controlling critical content/banner images.

Target Ratio Resize

Image resizes upto where its dimensions constrain it to scale to a target aspect ratio.

Usage: When some artistic control is preferred and image ratio is reasonably predictable,
for example, in a CMS where the end-user is most likely to insert 4:3 or 16:9 photos.

Fixed Ratio Resize

Image smoothly resizes and scales with a fixed aspect ratio.

Usage: When automation is more important than artistic control, for example,
in a CMS where you don't want randomly sized user-inserted images to break layout.

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.