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!
