HTML: muestra una imagen lo más grande posible conservando la relación de aspecto
Me gustaría tener una página HTML que muestre una sola imagen PNG o JPEG. Quiero que la imagen ocupe toda la pantalla, pero cuando hago esto:
<img src="whatever.jpeg" width="100%" height="100%" />
Simplemente estira la imagen y desordena la relación de aspecto. ¿Cómo resuelvo esto para que la imagen tenga la relación de aspecto correcta al escalar al tamaño máximo posible?
La solución publicada por Waynecasi funciona excepto en el caso de que tenga una imagen alta y una ventana amplia. Este código es una ligera modificación de su código que hace lo que quiero:
<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>