Home/ Questions/Q 4034816
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T12:01:13+00:00

Basically what I’m looking for is a way for an image to always be

  • 0

Basically what I’m looking for is a way for an image to always be as big as the browser window but maintaining it’s aspect ratio. The image should always resize with the smallest browser edge so that it hangs off the edge of the frame but never shows the white underneath. I’ve gotten this far:

window.onload = checkSize;
window.onresize = resize;

function checkSize(){
    var x = self.innerWidth;
    document.getElementById("picture").style.width = (x)+"px";
}

function resize(){
    var x = self.innerWidth;
    var y = self.innerHeight;
    var picy = document.getElementById("picture").style.height;
    document.getElementById("picture").style.width = (x)+"px";
    if (picy >= y){
        document.getElementById("picture").style.height = (y)+"px";
        document.getElementById("picture").style.removeProperty("width");
    }
}

Which in my head worked as follows:

  • resize with width
  • if the image height is less that the window height, start resizing the height and remove the width property (to keep the aspect ratio)

Am I close?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is what I would do:

    function resizeImage() {

if (self.innerHeight > self.innerWidth) {

document.getElementById("myimage").setAttribute("width","");
document.getElementById("myimage").setAttribute("height","100%");

} else {

document.getElementById("myimage").setAttribute("height","");
document.getElementById("myimage").setAttribute("width","100%");

}

}

    And add this:

    <body onload="resizeImage()" onresize="resizeImage()" style="margin:0px;">
    • 0