CSS 百分比高度和自动宽度不在 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

百分比声明是父元素的百分比，而不是您声明它的元素。宽度起作用的原因是因为您包含的 block 元素，即 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;
}