CODEWITHSUNDEEP
htmlcss
FriendlyFruit
FriendlyFruit

Reputation: 103

Html - Image height (percentage) in container

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

Answers (1)

andi
andi

Reputation: 6522

Add html, body {width:100%; height:100%;}

see working fiddle here: http://jsfiddle.net/A9b6Y/

Upvotes: 3

Related Questions