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) | |
| source: | ||
| target: | ||
| padding-top: | % | |
| height: | px | |
- Demo 1: Fixed Ratio Resize
- Demo 2: Target Ratio Resize
- Demo 3: Fluid Ratio Resize - with calculator
- Demo 4: All 3 Methods Side-by-Side
- Demo 5: All 3 Methods Side-by-Side - with a right-edge focal point
- Demo 6: All 3 Methods Side-by-Side - with a custom focal point
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.