CODEWITHSUNDEEP
javascripthtmlresizeimage
Trout
Trout

Reputation: 83

Making an image fit an IE 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 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

Upvotes: 1

Views: 506

Answers (2)

Trout
Trout

Reputation: 83

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.

Upvotes: 1

jerjer
jerjer

Reputation: 8770

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>

Upvotes: 1

Related Questions