3 Ways to Resize/Scale Web Images

Resize the browser window to see how the image scales.

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.

Pros: Total control over artisic composition of image.

Cons: Doesn't use an <img> tag, source and target image dimesions required,
custom CSS calculations for each image, CSS background-size not supported
in IE8/7 (dimensions shrink but image doesn't resize inside the <div> container).

Fluid Ratio Resize Calculator

This form calculates the padding-top and height CSS values for fluid ratio resizing.

Enter the source (actual) dimensions of your full-size image, and the target dimensions
(the final size to scale to), then transfer the results to your CSS.

  width (px) height (px)
padding-top: %
height: px

More demos and snippets

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