Wie passt ein Bild ohne Bildlaufleisten perfekt in ein Browserfenster?-CSS-Tutorial-php.cn

Wie passt ein Bild ohne Bildlaufleisten perfekt in ein Browserfenster?

Patricia Arquette

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

Original

681 Leute haben es durchsucht

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

So ändern Sie die Größe eines Bildes, damit es perfekt in ein Browserfenster passt

Die Größenänderung eines Bildes, damit es in die Grenzen eines Browserfensters passt, kann problematisch sein Eine Herausforderung, insbesondere wenn verschiedene Faktoren wie Fenstergröße, Bildabmessungen und Bildlaufleisten berücksichtigt werden müssen.

Das Problem:

Das Ziel besteht darin, die Bildqualität beizubehalten Seitenverhältnis, verhindern das Erscheinen der Bildlaufleiste und stellen sicher, dass das Bild den maximal verfügbaren Platz einnimmt, ohne seine Originalgröße zu überschreiten.

Nur CSS-Lösung:

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

Nach dem Login kopieren

Dieser Code erreicht das gewünschte Ergebnis ausschließlich durch CSS. Das Bild befindet sich in einem gitterförmig angezeigten Container, der die gesamte Fensterhöhe einnimmt. Das Bild selbst passt sowohl seine Breite als auch seine Höhe an, um in diesen Container zu passen, wobei sein Seitenverhältnis beibehalten und gleichzeitig sichergestellt wird, dass es im Fenster zentriert ist.

JQuery-Lösung:

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

Nach dem Login kopieren

Bei der JQuery-Lösung wird die Höhe des Körpers so eingestellt, dass sie mit der Fensterhöhe übereinstimmt. Dadurch kann die Eigenschaft „max-height“ des Bilds wie vorgesehen funktionieren und das Bild innerhalb der Fenstergrenzen beschränken. Darüber hinaus ändert sich die Bildgröße automatisch, wenn die Fenstergröße geändert wird.

Das obige ist der detaillierte Inhalt vonWie passt ein Bild ohne Bildlaufleisten perfekt in ein Browserfenster?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!