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

How to Make an Image Fit the Browser Window?

DDD

Release： 2024-10-30 06:29:27

Original

444 people have browsed it

How to Make an Image Fit the Browser Window?

How to Fit an Image to the Browser Window: A Comprehensive Guide

In the realm of web development, displaying images seamlessly within the browser window poses a unique challenge. Determining the appropriate size of an image to accommodate both the browser window and the image's dimensions remains a common dilemma. This article delves into the intricacies of resizing an image to fit the browser window effectively, comprehensively addressing the intricacies involved.

Objectives for Image Resizing

To achieve a harmonious integration of images into the web layout, we must satisfy the following criteria:

The browser window's dimensions, often unknown, should not drive the image size.
Unknown original dimensions of the image should not hinder the resizing process.
The image should maintain its aspect ratio, preserving its original proportions.
The image should be displayed entirely within the window, without cropping or distortion.
Scrollbars are undesirable and should not appear if the image fits the window.
The image should respond dynamically to changes in window dimensions, filling the available space without exceeding its original size.

CSS-Only Solution

For those seeking a pure CSS solution, the following code gracefully centers and resizes the image based on the browser window dimensions:

<code class="html"><html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: 100%;
        }
        .center-fit {
            max-width: 100%;
            max-height: 100vh;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="imgbox">
    <img class="center-fit" src='pic.png'>
</div>
</body>
</html></code>

Copy after login

jQuery-based Solution

Alternatively, this jQuery-powered solution ensures that the image container, body in this case, has a height equal to the browser window height, allowing the image's max-height to function as intended:

<code class="html"><!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .fit {
            max-width: 100%;
            max-height: 100%;
        }
        .center {
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>

<img class="center fit" src="pic.jpg">

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
    function set_body_height() {
        $('body').height($(window).height());
    }
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });
</script>

</body>
</html></code>

Copy after login

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