3 Ways to Resize/Scale Web Images
Resize the browser window to see how the image scales.
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.
Pros: Uses standard <img> tag, convenient, very good browser support (even IE7).
Cons: Images can become very disproportionate to content.
- 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.