3 Ways to Resize/Scale Web Images
If you can't see all the images on your screen, click the "Hide Text" button to bring them closer together, then gradually reduce the browser window to compare how they resize and scale at smaller screen sizes.
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.
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.
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.
- 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.