Heim > Artikel > Web-Frontend > Wie kann ich die Größe eines Bildes dynamisch an das Browserfenster anpassen?

Wie kann ich die Größe eines Bildes dynamisch an das Browserfenster anpassen?

Linda HamiltonOriginal: 2024-10-31 01:17:29611Durchsuche

How to Dynamically Resize an Image to Fit the Browser Window?

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

Ein Bild in ein Browserfenster einschließen und gleichzeitig sein Seitenverhältnis beibehalten, um sicherzustellen Es wird vollständig angezeigt und das Verhindern von Bildlaufleisten stellt oft eine Herausforderung dar. Um diese Probleme effektiv anzugehen, finden Sie hier zwei umfassende Ansätze.

1. Nur-CSS-Lösung (Update 2018)

Diese Methode nutzt das Rasterlayout und die automatischen Randfunktionen von CSS und bietet eine umfassende, reine CSS-Lösung. Das folgende Code-Snippet zentriert das Bild dynamisch und passt es an das Browserfenster an:

<code class="html"><div class="imgbox">
  <img class="center-fit" src="pic.png">
</div></code>

CSS:

<code class="css">    * {
        margin: 0;
        padding: 0;
    }
    .imgbox {
        display: grid;
        height: 100%;
    }
    .center-fit {
        max-width: 100%;
        max-height: 100vh;
        margin: auto;
    }</code>

2. JavaScript/jQuery-Lösung

Dieser Ansatz basiert auf jQuery, um die Höhe des Bildcontainers dynamisch festzulegen, sodass die Max-Height-Eigenschaft des Bildes wie vorgesehen funktioniert. Das Bild passt seine Größe automatisch an, wenn die Größe des Browserfensters geändert wird.

<code class="html"><body>
  <img class="center fit" src="pic.jpg">
</body></code>

<code class="javascript">    // Set body height to window height
    function set_body_height() {
        $('body').height($(window).height());
    }
    // On DOM ready and window resize, adjust body height
    $(document).ready(function() {
        $(window).bind('resize', set_body_height);
        set_body_height();
    });</code>

Hinweis: Eine ähnliche Lösung ist als jQuery-Plugin verfügbar, das vom Benutzer gutierrezalex erstellt wurde.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe eines Bildes dynamisch an das Browserfenster anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery css while auto Property 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：Wann sollte „height: 100 %“ vs. „min-height: 100 %“ in CSS verwendet werden?Nächster Artikel：Wann sollte „height: 100 %“ vs. „min-height: 100 %“ in CSS verwendet werden?

In Verbindung stehende Artikel

Mehr sehen