通过图像的高度定义图像的大小 IE9

Question

我正在制作一个网页，我需要在其中根据图像的高度来定义图像。它可以是 height:100%; 与其父级具有相同的高度，也可以是 height:5vh 因为他的父级是 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 更改为：

<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 : 随时添加更好的答案，如果有效我会接受:)

通过图像的高度定义图像的大小 IE9

Define the size of an image by its height IE9

html

css

internet-explorer

internet-explorer-9