3 Ways to Resize/Scale Web Images

Resize the browser window to see how the image scales.

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.

Pros: Some control over artisic composition of image.

Cons: Doesn't use an <img> tag so custom code replacement would probably be required
for use in a CMS, CSS background-size not supported in IE8/7 (dimensions shrink but
image doesn't resize inside the <div> container).

More demos and snippets

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