Home > Article > Web Front-end > How to Make an Image Fit the Browser Window?

How to Make an Image Fit the Browser Window?

DDDOriginal: 2024-10-30 06:29:27444browse

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>

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>

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!

jquery css if for function this

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Implement Ellipsis in Text to Maintain Presence Amidst Width Fluctuation?Next article：How to Implement Ellipsis in Text to Maintain Presence Amidst Width Fluctuation?

See more

How to Make an Image Fit the Browser Window?

Related articles