html - 使用 % 设置组件的全高不起作用

Question

我创建了一个 div 组件并在该 div 中添加了一些图像。我为 div 设置了一个特定的高度(300 像素)并将其中图像的高度设置为 100%。它在 ios 中运行良好，但在 Android 中，图像出现在全屏上，而不是仅出现在特定的 div 上。我需要的是，图像应该适合那个 div(占据 div 的整个空间)。

我的代码；

<div style="height:300px;width:100%;">
<image src="lilly.png" style="height:100%;width:50%;float:right;">
<image src="rose.png" style="height:100%;width:50%;">
</div>

在 HTML5 中有没有其他方法可以设置元素高度来占据 div 的整个空间，而不是使用 100%。

Answer 1

这也应该有效:

HTML:

<div>
    <img src="http://placehold.it/200x100/f00" />
    <img src="http://placehold.it/300x100/00f" />
</div>

CSS:

div {
    height:300px;
    width:100%;
    background-color:red;
    font-size:0;
}
img {
    width: 50%;
    height: 100%;
    display:inline-block;
}

Jsfiddle:http://jsfiddle.net/vAbRC/2/