Heim >Web-Frontend >CSS-Tutorial >Wie kann ich die Größe eines Bildes ändern, damit es ohne Verzerrung in das Browserfenster passt?
Wie kann ich die Größe eines Bildes ändern, damit es ohne Verzerrung in das Browserfenster passt?
- Barbara StreisandOriginal
- 2024-11-01 15:51:551067Durchsuche
Die Größe eines Bildes so ändern, dass es ohne Verzerrung in das Browserfenster passt
Die Größe eines Bildes so zu ändern, dass es in ein Browserfenster passt, ist eine häufige Aufgabe mit scheinbar einfachen Lösungen. Allerdings kann die Einhaltung spezifischer Anforderungen, wie die Wahrung von Proportionen und die Vermeidung von Beschnitten, eine Herausforderung darstellen.
Lösung ohne Bildlaufleisten und Javascript (nur CSS)
<code class="html"><html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.imgbox {
display: grid;
height: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh; /* vh ensures height matches browser window */
margin: auto;
}
</style>
</head>
<body>
<div class="imgbox">
<img class="center-fit" src='pic.png'>
</div>
</body>
</html></code>
Dies Die Lösung verwendet CSS Grid, um sicherzustellen, dass der Bildcontainer die gesamte Fensterhöhe einnimmt. Das Bild wird dann so eingestellt, dass es horizontal und vertikal in diesen Container passt, wobei sein Seitenverhältnis erhalten bleibt und das Hinzufügen von Bildlaufleisten vermieden wird.
Lösung mit JQuery
Wenn Javascript verfügbar ist , ein anderer Ansatz ist:
<code class="html"><html>
<body>
<img class="center fit" src="pic.jpg" >
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function set_body_height() {
$('body').height($(window).height());
}
$(document).ready(function() {
$(window).bind('resize', set_body_height);
set_body_height();
});
</script>
</body>
</html></code>
Hier wird die Körperhöhe so eingestellt, dass sie mit der Fensterhöhe übereinstimmt, um sicherzustellen, dass die Eigenschaft „max-height“ im Bild korrekt funktioniert. Das Fenstergrößenänderungsereignis wird auch verarbeitet, um die Körperhöhe und die Bildgröße automatisch anzupassen, wenn die Fenstergröße geändert wird.
Das obige ist der detaillierte Inhalt vonWie kann ich die Größe eines Bildes ändern, damit es ohne Verzerrung in das Browserfenster passt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!