How to Make an Image Fit Perfectly in a Browser Window Without Scrollbars?-CSS Tutorial-php.cn

How to Make an Image Fit Perfectly in a Browser Window Without Scrollbars?

Patricia Arquette

Release： 2024-11-01 07:33:02

Original

681 people have browsed it

How to Make an Image Fit Perfectly in a Browser Window Without Scrollbars?

How to Resize an Image to Fit Perfectly in a Browser Window

Resizing an image to fit within the confines of a browser window can pose a challenge, especially when various factors such as window size, image dimensions, and scrollbars need to be considered.

The Issue:

The goal is to maintain the image's aspect ratio, prevent scrollbar appearance, and ensure the image occupies the maximum available space without exceeding its original size.

CSS-Only Solution:

Update (2018-04-11):

<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

This code achieves the desired result solely through CSS. The image resides within a grid-displayed container that occupies the full window height. The image itself adapts both its width and height to fit within this container, preserving its aspect ratio while ensuring it's centered within the window.

JQuery Solution:

<code class="html"><!DOCTYPE html>
<html>
<head>
<style>
    * { padding: 0; margin: 0; }

    .fit { /* set relative picture size */
        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">
    function set_body_height() { // set body height = window 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 JQuery solution involves setting the height of the body to match the window height. This allows the max-height property of the image to function as intended, confining the image within the window's bounds. Additionally, the image resizes automatically upon window resizing.

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