HTML - Anzeige eines Bildes so groß wie möglich unter Beibehaltung des Seitenverhältnisses
Ich hätte gerne eine HTML-Seite, die ein einzelnes PNG- oder JPEG-Bild anzeigt. Ich möchte, dass das Bild den gesamten Bildschirm einnimmt, aber wenn ich das mache:
<img src="whatever.jpeg" width="100%" height="100%" />
Das Bild wird nur gestreckt und das Seitenverhältnis durcheinander gebracht. Wie löse ich das Problem, damit das Bild das richtige Seitenverhältnis aufweist und gleichzeitig auf die maximal mögliche Größe skaliert wird?
Die von Wayne gepostete Lösungfast funktioniert nur, wenn Sie ein großes Bild und ein breites Fenster haben. Dieser Code ist eine kleine Modifikation seines Codes, die das tut, was ich will:
<html>
<head>
<script>
function resizeToMax(id){
myImage = new Image()
var img = document.getElementById(id);
myImage.src = img.src;
if(myImage.width / document.body.clientWidth > myImage.height / document.body.clientHeight){
img.style.width = "100%";
} else {
img.style.height = "100%";
}
}
</script>
</head>
<body>
<img id="image" src="test.gif" onload="resizeToMax(this.id)">
</body>
</html>