通過其高度定義圖像的大小IE9

我正在做一個網頁，我需要通過它的高度來定義圖像。它可以是height:100%;以具有與其父項相同的高度或height:5vh，因爲他的父項高度爲5vh。我把寬度設置爲默認值width:auto;通過其高度定義圖像的大小IE9

所有這些代碼運行良好，但我需要兼容性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

來源

2016-08-02 Relisora

這將是很好的，如果你有一個的jsfiddle有助於解釋這個問題，我會接受它。它有時更容易與代碼一起查看問題。即使IE11並不完全支持它的所有方面，但它在處理'vh'的方式上總體上有點粗略。你可以使用媒體查詢來做同樣的事情，你試圖在這裏實現 – Andrew

我得到了這樣的[jsfiddle]（https://jsfiddle.net/6Lser421/）它適用於除了IE9以外的任何東西 – Relisora

我反覆嘗試多個的東西，在最後，我自首放置相對於彼此的元件。（圖像相對高度父高度）

我改變了我的HTML：

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

而我的CSS來：

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

所以基本上我把position:absolute的一切。

我知道，這可能不是我的問題的最佳解決方案，但在當時，它的工作原理。

PS：隨意添加一個更好的答案，如果它的工作原理:)

來源

2016-08-02 13:45:28 Relisora

通過其高度定義圖像的大小IE9

回答

相關問題