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).
- 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.