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

Question

我创建了一个 div 组件并在该 div 中添加了一些图像。我为 div 设置了一个特定的高度（300px）并将其中的图像高度设置为 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/

Answer 2

尝试这个

css

img{
    max-width:100%;
    height:100%;
}

fsFiddle 链接

希望这对你有用