Heim > Artikel > Web-Frontend > Wie passt ein Bild ohne Bildlaufleisten perfekt in ein Browserfenster?

Wie passt ein Bild ohne Bildlaufleisten perfekt in ein Browserfenster?

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

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>

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>

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!

jquery css while Property function this issue

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie entferne ich den Rahmen von einem IFrame in IE6?Nächster Artikel：Wie entferne ich den Rahmen von einem IFrame in IE6?

In Verbindung stehende Artikel

Mehr sehen