Wie passt ein Bild perfekt in ein Browserfenster?

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

Sicherzustellen, dass ein Bild nahtlos in ein Browserfenster passt, kann eine Herausforderung darstellen, insbesondere bei Unbekannte Browserabmessungen und Bildproportionen. Das Erreichen dieser Größenänderungsfunktionalität ist jedoch mit einem gut durchdachten Ansatz möglich.

Nur ​​CSS-Lösung (aktualisiert im April 2018)

Für Browser, die modernes CSS unterstützen, eine rein Die CSS-Lösung kann wie folgt implementiert werden:

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

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

Diese Lösung verwendet ein CSS-Raster und passt die Größe des Bildes dynamisch an und zentriert es im Browserfenster.

jQuery-Lösung

Ein anderer Ansatz verwendet jQuery, um die Körperhöhe gleich der Fensterhöhe festzulegen, sodass die Eigenschaft „max-height“ des Bilds wie erwartet funktioniert:

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

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

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

Dies Die Lösung besteht darin, die Körperhöhe so einzustellen, dass sie mit der Fensterhöhe übereinstimmt, sodass die Größe des Bilds dynamisch angepasst werden kann, wenn sich die Fensterabmessungen ändern.

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