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

【问题标题】：Define the size of an image by its height IE9通过高度IE9定义图像的大小
【发布时间】：2016-12-07 19:27:00
【问题描述】：

我正在做一个网页，我需要通过它的高度来定义图像。它可以是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

【问题讨论】：

如果你有一个 jsfiddle 来帮助解释问题会很好。有时更容易与代码一起看到问题。总的来说，IE 处理vh 的方式有点粗略，即使 IE11 也不完全支持它的所有方面。您可以使用媒体查询来执行您在此处尝试实现的相同操作
我得到了类似jsfiddle 的东西，它在除 IE9 之外的所有设备上都运行良好

标签： html css internet-explorer internet-explorer-9

【解决方案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：请随意添加更好的答案，如果可行，我会接受:)

【讨论】：