How to Dynamically Resize an Image to Fit the Browser Window?-CSS Tutorial-php.cn

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

Linda Hamilton

Release： 2024-10-31 01:17:29

Original

610 people have browsed it

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" src="pic.png">
</div></code>

Copy after login

CSS:

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

Copy after login

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"><body>
  <img class="center fit" src="pic.jpg">
</body></code>

Copy after login

<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>

Copy after login

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!