通过其高度定义图像的大小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

回答

相关问题