Image resized in a contaner(IE problem)

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
rainerpl
Forum Newbie
Posts: 16
Joined: Mon Jun 20, 2011 12:46 pm

Image resized in a contaner(IE problem)

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Image resized in a contaner(IE problem)

Post by pickle »

So, when the image resizes to 100% height, the container doesn't widen to contain the the image?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
rainerpl
Forum Newbie
Posts: 16
Joined: Mon Jun 20, 2011 12:46 pm

Re: Image resized in a contaner(IE problem)

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Image resized in a contaner(IE problem)

Post by pickle »

That sounds like a bug in IE not realizing the image has resized. Try focusing your Googling efforts on that.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
rainerpl
Forum Newbie
Posts: 16
Joined: Mon Jun 20, 2011 12:46 pm

Re: Image resized in a contaner(IE problem)

Post 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".
Post Reply