CSS百分比高度＆amp;自动宽度不在IE中创建宽高比

Question

我全神贯注地找不到解决办法。我想设置图像的百分比高度，并保持宽度的宽高比。

在IE中不适用于身高：

img{
    height: 70%;
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
}

在IE中适用于宽度：

img{
    height: auto;
    width: 70%;
    position: absolute;
    top: 0;
    left: 0;
}

任何帮助都非常感激。

Answer 1

百分比声明是父元素的百分比，而不是您声明它的元素。宽度起作用的原因是因为默认情况下您的包含块元素display:block将跨越页面。如果您为父级分配固定高度，那么它将按预期工作。

HTML

<div class="parent">
    <img src="http://placehold.it/300x200"/>
</div>

CSS

.parent{
    height:200px;
    position:relative;
}
img{
    height: 70%;
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
}