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;
}