Making an image fit an IE window_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-22 18:20 出处：网络

I need to make an image change its size according to the window size, that is, if the window is re-sized the image needs to be re-sized to fit the window.

I need to make an image change its size according to the window size, that is, if the window is re-sized the image needs to be re-sized to fit the window. This problem is easy enough with Chrome and Firefox, I just set 'width=100%', but IE isn't as kind...

This problem was raised several times, but I couldn't find a coherent answer, it might be that I'm really new to the 开发者_JS百科whole web development business, but it seems to me like this problem wasn't really answered...

Could this be solved by changing the width attribute with javascript according to the window size? Did anybody encounter this problem and has a better solution?

Thanks in advance, Trout

This should do it!!!

<html>
<body>
  <div style="width:100%;height:100%;position:absolute;top:0;left:0;">
     <img src="some.jpg" style="width:100%;height:100%;" />
  </div>
</body>
</html>

This was solved by a friend of mine with a small JavaScript.

windonw.onresize = function(e){
    if (self.innerWidth){
         windowWidth = self.innerWidth
    } else if (document.documentElement && document.documentElement.clientWidth){
         windowWidth = document.documentElement.clientWidth
    } else if (document.body) {
         windowWidth = document.body.clientWidth
    }
    document.getElementById("img_id").style.width = windowWidth-(some number)
}

The reason I added (some-number) is that IE calculated its width with the margins at the sides and the images escapes the window, so what you have to do is make the image a little smaller than 'windowWidth'...

Hope this helps more lost souls like me.