Html - 容器中的图像高度(百分比)

Question

我的问题很简单，但我仍然找不到这个问题的答案...

假设我们有两个包含图像的容器。

<div id="containera">
<div id="containerb">
<img id="imagea" src="image.jpg"/>

</div></div>

我们有类似的东西

#containera { width: 50%; height: 50%; background-color:blue;}
#containerb { width: 80%; height: 80%; background-color:red;}
#imagea { height:100%; width:auto;}

问题是:图像高度是全屏高度而不是 100% containerb(50% 屏幕高度的 80%)。

我希望图像是 containerb 的 100% 高度，而不是屏幕的 100% 高度。奇怪:如果我使用“宽度”，则宽度会根据 containerb 的宽度进行缩放。

我能否以某种方式限制容器的高度，使它们不会将图像缩放到 100% 屏幕高度？尝试了 max-height 的各种变化，但它没有以任何方式工作......

谢谢，如果你知道我该如何解决这个问题......

Answer 1

添加html, body {width:100%;高度:100%；

在这里查看工作 fiddle :http://jsfiddle.net/A9b6Y/