Resize an Image to Fit Browser Window without Distortion

Resizing an image to fit a browser window is a common task with seemingly simple solutions. However, adhering to specific requirements, such as preserving proportions and avoiding cropping, can present challenges.

Solution without Scrollbars and Javascript (CSS only)

This solution uses CSS Grid to ensure the image container occupies the full window height. The image is then set to fit horizontally and vertically within that container, preserving its aspect ratio and avoiding the addition of scrollbars.

Solution with JQuery

If Javascript is available, another approach is:

Here, the body height is set to match the window height, ensuring the max-height property on the image functions correctly. The window resize event is also handled to automatically adjust the body height and image size when the window is resized.