Page 1 of 1

Image resized in a contaner(IE problem)

Posted: Tue Sep 20, 2011 2:45 pm
by rainerpl
Hi

i have a container with a fixed height and auto width.
In that container i have an image, that has height:100%. Now, the problem is, that this scales the image and changes its width, but it doesnt effect its containers auto width. That still remains as if the image is at is full size. This only happens in IE.
I ran my site through html and css validator and there are no obvious problems.

Re: Image resized in a contaner(IE problem)

Posted: Tue Sep 20, 2011 4:40 pm
by pickle
So, when the image resizes to 100% height, the container doesn't widen to contain the the image?

Re: Image resized in a contaner(IE problem)

Posted: Wed Sep 21, 2011 7:21 am
by rainerpl
pickle wrote:So, when the image resizes to 100% height, the container doesn't widen to contain the the image?
No, its the other way around.
Original image is(w,h) 300x300
Image container(div) is 100px height,auto width
Img tag is set to height:100%, so it scales both its width and height down, so its new height is 100px, and width is 100px.

But...in IE, the containing div, still remains at 300px width, even though there is no content that would expand it by that 200 extra pixels. It behaves as if the image is still in its original size.

Id like to somehow solve it without using javascript.

Re: Image resized in a contaner(IE problem)

Posted: Wed Sep 21, 2011 9:43 am
by pickle
That sounds like a bug in IE not realizing the image has resized. Try focusing your Googling efforts on that.

Re: Image resized in a contaner(IE problem)

Posted: Wed Sep 21, 2011 12:20 pm
by rainerpl
This is a sample situation where IE8 fails, but IE7 or Compatibility mode works.

Code: Select all

<div style="float:left;width:auto;height:40px;background-color:gray;" id="outerContainer">
	<div style="height:100%;" id="innerContainer">
		<img src="XXX.png" style="height:100%;"  title="image" alt="img">
	</div>
</div>
However, if i set innerContainer´s height to fixed 40px as its parent, then everything works as it should.
Weird thing is that image scales to 40px as it should.
I was thinking that maybe...because of float, the parent container is removed from document flow, and wont be updated...:S but i dont know. it works on all other browsers.
But...id like he innerContainer to have height:100%, because then it is more "universal".