img 的最大高度在 IE 中不起作用答案

【问题标题】：Max-height on img not working in IEimg 的最大高度在 IE 中不起作用
【发布时间】：2013-12-29 14:50:50
【问题描述】：

我正在尝试将 max-height 属性赋予图像，该属性在除 IE 之外的所有浏览器中都能完美运行。图像不会根据包装分区的大小调整大小。我搜索了解决方案，人们说给height:auto; width:auto，但这似乎不起作用。我正在动态获取图像链接。所以我不能确定图像的大小。
我有这个：

HTML：

<header>
<div class="logo">
<img src="<?php echo $logo_link; ?>" />
</div>          
</header>

CSS：

header {
height:10%;
}
.logo {
float:left;
}
.logo img{
max-height: 100%;
width:auto;
}

logo 分区内的图像应该调整大小，因为标题包含 .logo 分区，并且我已将标题设置为 height:10%，因此它会根据窗口大小调整大小。在除 IE 之外的其他浏览器中工作得非常好。

有什么想法或解决方法吗？

【问题讨论】：

PS - 如果您的 IE 真的很旧（lte IE9），您可能还想将header 设置为display: block;。这将解决您几乎所有的 IE 问题：necolas.github.io/normalize.css
@Deryck 哦，对了，谢谢你的建议，在我的 reset.css 中有 :)
@jprofitt 你是对的！我错误地把'.header'放在这里而不是'header'，我的文件和你说的完全一样，现在在这里编辑！ :)
也可能想要修复你的 PHP - 流浪的) 和额外的?>"
@Deryck 天哪，我真是太愚蠢了。我实际上有更多的 php 代码在里面，我删除了另一部分但忘记删除最后的附加内容。

【解决方案1】：

IE 存在图像高度错误。把它放在你的 CSS 中来修复它：

img {
    height: auto;
    width: auto\9;
}

【讨论】：

【解决方案2】：

您应该将 100% 的高度放在 img 和 width: auto 甚至不是 nessery，但在此之前检查包装 div 如果它确实具有实际高度，则可能是图像高度甚至不是 10% 的高度上面的 div（最大高度仅在原始尺寸大于 100% 的环绕元素时才适用

再次检查它，图像的包装元素实际上没有固定高度...

header {
height:10%;
}
.logo {
float:left;
height: 100%;
}
.logo img{
height: 100%;/height:inherit;
}

【讨论】：