Heim > Artikel > Web-Frontend > Wie passt man ein Bild an das Browserfenster an?

Wie passt man ein Bild an das Browserfenster an?

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

How to Make an Image Fit the Browser Window?

So passen Sie ein Bild an das Browserfenster an: Eine umfassende Anleitung

Im Bereich der Webentwicklung die nahtlose Anzeige von Bildern im Browser Fenster stellt eine einzigartige Herausforderung dar. Die Bestimmung der geeigneten Größe eines Bildes, um sowohl das Browserfenster als auch die Abmessungen des Bildes zu berücksichtigen, bleibt ein häufiges Dilemma. Dieser Artikel befasst sich mit den Feinheiten der Größenänderung eines Bildes, damit es effektiv in das Browserfenster passt, und geht umfassend auf die damit verbundenen Feinheiten ein.

Ziele für die Bildgrößenänderung

Um eine harmonische Integration zu erreichen Um Bilder in das Weblayout zu integrieren, müssen wir die folgenden Kriterien erfüllen:

Die oft unbekannten Abmessungen des Browserfensters sollten die Bildgröße nicht beeinflussen.
Unbekannte Originalabmessungen des Bildes sollte den Größenänderungsprozess nicht behindern.
Das Bild sollte sein Seitenverhältnis und seine ursprünglichen Proportionen beibehalten.
Das Bild sollte vollständig innerhalb des Fensters angezeigt werden, ohne Zuschneiden oder Verzerrung.
Bildlaufleisten sind unerwünscht und sollten nicht angezeigt werden, wenn das Bild in das Fenster passt.
Das Bild sollte dynamisch auf Änderungen der Fensterabmessungen reagieren und den verfügbaren Platz ausfüllen, ohne seine Originalgröße zu überschreiten.

Nur CSS-Lösung

Für diejenigen, die eine reine CSS-Lösung suchen, zentriert der folgende Code das Bild elegant und passt es basierend auf den Abmessungen des Browserfensters an:

<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-basierte Lösung

Alternativ stellt diese jQuery-basierte Lösung sicher, dass der Bildcontainer, in diesem Fall der Körper, eine Höhe hat, die der Höhe des Browserfensters entspricht, sodass die maximale Bildgröße erreicht werden kann -Höhe, um wie vorgesehen zu funktionieren:

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

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

jquery css if for function this

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 implementiert man Ellipsen im Text, um bei Breitenschwankungen präsent zu bleiben?Nächster Artikel：Wie implementiert man Ellipsen im Text, um bei Breitenschwankungen präsent zu bleiben?

In Verbindung stehende Artikel

Mehr sehen