Wie passt ein Bild ohne Bildlaufleisten perfekt in ein Browserfenster?

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


<style>
    * { padding: 0; margin: 0; }

    .fit { /* set relative picture size */
        max-width: 100%;
        max-height: 100%;
    }

    .center {
        display: block;
        margin: auto;
    }
</style>



<img  class="center fit lazy" src="/static/imghwm/default1.png" data-src="pic.jpg" alt="Wie passt ein Bild ohne Bildlaufleisten perfekt in ein Browserfenster?" >

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


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