css - 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

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