Home > Article > Web Front-end > How to Make an Image Fit Perfectly in a Browser Window Without Scrollbars?

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

Patricia ArquetteOriginal: 2024-11-01 07:33:02665browse

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>

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>

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!

jquery css while Property function this issue

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 Remove the Border from an IFrame in IE6?Next article：How to Remove the Border from an IFrame in IE6?

See more

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

Related articles