Home/ Questions/Q 55457
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T17:22:49+00:00

I’d like to have an HTML page which displays a single PNG or JPEG

  • 0

I’d like to have an HTML page which displays a single PNG or JPEG image. I want the image to take up the whole screen but when I do this:

<img src="whatever.jpeg" width="100%" height="100%" />

It just stretches the image and messes up the aspect ratio. How do I solve this so the image has the correct aspect ratio while scaling to the maximum size possible ?

The solution posted by Wayne almost works except for the case where you have a tall image and a wide window. This code is a slight modification of his code which does what I want:

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Here’s a quick function that will adjust the height or width to 100% depending on which is bigger. Tested in FF3, IE7 & Chrome

    <html> <head> <script> function resizeToMax(id){     myImage = new Image()      var img = document.getElementById(id);     myImage.src = img.src;      if(myImage.width > myImage.height){         img.style.width = '100%';     } else {         img.style.height = '100%';     } } </script> </head> <body> <img id='image' src='test.gif' onload='resizeToMax(this.id)'> </body> </html>
    • 0