イメージのサイズを高さで定義するIE9

Question

イメージの高さでイメージを定義する必要があるWebページを作成しています。親と同じ高さを持つのはheight:100%;、親は5vhなのでheight:5vhのいずれかになります。幅をデフォルト値にしていますwidth:auto;

このコードはすべてうまくいきますが、IE9の互換性が必要です。このブラウザの画像は、高さを定義するときにサイズが変更されません。

HTMLコード：

<div class="container"> 
    <div class="red"></div> 
    <img id="logo" src="img/myPic.png" alt="myPic"> 
</div> 

CSSコード：

.container{ 
height:5vh; 
} 

.red { 
width:10px; 
height:5vh; 
background-color: #E92426; 
position:relative; 
float:left; 
} 

#logo { 
margin-left:3%; 
height:100%; 
// OR height:5vh; (I tried both) 
} 

あなたは、私はIE9と互換性を持たせるために調整すべきかを知っていますか？

編集：私は何度も複数のものを試み、最終的に、私は互いに対して要素を配置降伏JSFiddle

Answer 1

。 （親の高さに像高相対）

私はに私のHTMLを変更：だから基本的に私はすべてにposition:absoluteを置く

.container { 
    background-color : #323A41; 
    height:5%; 
    width:100%; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:0; 
} 

.red { 
    width:10px; 
    height:5%; 
    background-color: #E92426; 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:10; 
} 

#logo { 
    height:5%; 
    width:auto; 
    position:absolute; 
    top:0; 
    left:5%; 
    z-index:10; 
} 

：

<div class="container"></div> 
<div class="red"></div> 
<img id="logo" src="img/myPic.png" alt="myPic"> 

そして、私のCSSに。

私はこれがおそらく私の質問のための最善の解決策ではないことを認識していますが、当分の間、それは動作します。

PS：良い答えを追加すること自由に感じ、それが動作するかどうか、私はそれを受け入れるだろう:)