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.
Image resized in a contaner(IE problem)
Moderator: General Moderators
Re: Image resized in a contaner(IE problem)
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.
Re: Image resized in a contaner(IE problem)
No, its the other way around.pickle wrote:So, when the image resizes to 100% height, the container doesn't widen to contain the the image?
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)
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.
Re: Image resized in a contaner(IE problem)
This is a sample situation where IE8 fails, but IE7 or Compatibility mode works.
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".
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>
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".