How to Dynamically Resize an Image to Fit the Browser Window?

How to Dynamically Resize an Image to Fit in the Browser Window

Encasing an image within a browser window while maintaining its aspect ratio, ensuring it's fully displayed, and preventing scrollbars often poses a challenge. To address these issues effectively, here are two comprehensive approaches.

1. CSS-Only Solution (2018 Update)

Leveraging CSS's grid layout and auto-margining capabilities, this method offers a comprehensive, CSS-only solution. The code snippet below dynamically centers and resizes the image to fit the browser window:

<code class="html"><div class="imgbox">
  <img  class="center-fit lazy" src="/static/imghwm/default1.png" data-src="pic.png" alt="How to Dynamically Resize an Image to Fit the Browser Window?" >
</div></code>

CSS:

<code class="css">    * {
        margin: 0;
        padding: 0;
    }
    .imgbox {
        display: grid;
        height: 100%;
    }
    .center-fit {
        max-width: 100%;
        max-height: 100vh;
        margin: auto;
    }</code>

2. JavaScript/jQuery Solution

This approach relies on jQuery to set the height of the image container dynamically, allowing the max-height property on the image to function as intended. The image adjusts its size automatically as the browser window is resized.

<code class="html">
  <img  class="center fit lazy" src="/static/imghwm/default1.png" data-src="pic.jpg" alt="How to Dynamically Resize an Image to Fit the Browser Window?" >
</code>

<code class="javascript">    // Set body height to window height
    function set_body_height() {
        $('body').height($(window).height());
    }
    // On DOM ready and window resize, adjust body height
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });</code>

Note: A similar solution is available as a jQuery plugin created by user gutierrezalex.

The above is the detailed content of How to Dynamically Resize an Image to Fit the Browser Window?. For more information, please follow other related articles on the PHP Chinese website!