ansaurus

Question

Answer 1

+1 A:

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>

jerjer 2010-10-29 09:56:56

This works if my img was a background, but its an element in a page.

Trout 2010-10-29 10:06:16

Also, when you add both 'width' and 'height' properties the image ratio gets distorted... Thanks for the help though...

Trout 2010-10-29 10:07:01

you can remove either width or height such that the image will not be distorted: it should now be <img src="some.jpg" style="width:100%;" /> or <img src="some.jpg" style="height:100%;" />

jerjer 2010-10-29 10:28:58

Answer 2

A:

Ok, this was solved by a friend of mine with a small javacript...

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... :)

Trout 2010-10-29 10:55:44

ansaurus

tags:

views:

answers:

Making an image fit an IE window

related questions