How to Resize Images To Fit on Screen

Last updated 2012-07-14 - Send Feedback
Related: how-to

At diglloyd.com, images on the subscriber pages are displayed in two ways:

  • Example pages containing “inline” images on a mainpage.
  • Standalone “gallery” pages displaying the full resolution example along with its actual-pixels crops.

The “inline” images are typically displayed at 1280 pixels wide for landscape orientation images, and ~800 pixels wide for portrait orientation images. In most cases, clicking an image opens a new window with a higher resolution version on a black background.

Web browsers vary in speed and responsiveness and quality of display. Apple Safari or Google Chrome recommended in most cases.

Controlling size

If the image does not fit, a size control is available.

diglloyd resize control on an image page

Scaling to fit

The most basic control affects the whole page, not just images: in Apple Safari, use View => Zoom In / Zoom out (cmd + or cmd -) to scale the entire page proportionally. This is not image scaling per se because it scales everything on the page, but it can be quite useful.

Screen sizes are changing with time. For this reason and others, the large gallery pages offer a resize control, shown below.

Please note that after changing the sizing, the page must be refreshed for all the images on it to be resized (otherwise only the chosen image is resized). This is the Refresh command in browsers (cmd-R in Safari).

Especially for users with lower resolution screens, the “Fit to window width” setting is most convenient. But this is also very useful for even larges screens, because sometimes the images can be wider than even the highest resolution screen.

The Fit to window width choice is intelligent; it won’t show a crop at a width greater than its actual size (to avoid pixellated display).

Resize menu for images on gallery pages

Clicking the popup menu above shows the choice as follows:

Resize menu for images on gallery pages

Try it out

Click the image below then use the sizing control to experiment.

Click to view at large size

diglloyd Inc. | FTC Disclosure | PRIVACY POLICY | Trademarks | Terms of Use
Contact | About Lloyd Chambers | Consulting | Photo Tours
RSS Feeds | Twitter
Copyright © 2008-2017 diglloyd Inc, all rights reserved.