Question

我正在做一个网页，我需要按照高度来定义图像。它可以是height:100%;高度比其父级height:5vh高，因为他的父级高度为5vh。我将宽度设为默认值width:auto;

所有这些代码都运行良好，但我需要兼容IE9，当我只定义它的高度时，此浏览器上的图像不会调整大小。

HTML code：

<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定义图像的大小

1 个答案: