Reputation: 103
my problem is quite simple but I still cannot find the answer for this one...
Say we have two containers containing an Image.
<div id="containera">
<div id="containerb">
<img id="imagea" src="image.jpg"/>
</div></div>
and we have something like
#containera { width: 50%; height: 50%; background-color:blue;}
#containerb { width: 80%; height: 80%; background-color:red;}
#imagea { height:100%; width:auto;}
Problem is: The Image height is FULL SCREEN height and NOT 100% containerb (80% of 50% screenheight).
I want the Image to be 100% height of containerb, not 100% height of the screen. Weird: If i work with "width", the width is scaled depending on the width of containerb.
Can I somehow restrict the height of the containers so they dont scale the image to 100% screenheight? tried max-height in tons of variations but it did not work in any way...
Thanks, if you have any idea how i could solve this..
Upvotes: 1
Views: 4609
Reputation: 6522
Add html, body {width:100%; height:100%;}
see working fiddle here: http://jsfiddle.net/A9b6Y/
Upvotes: 3